From e717928680d08a21a3767f558a96c6a2b7d1e28c Mon Sep 17 00:00:00 2001
From: tdttaufikhidayat <44017374+tdttaufikhidayat@users.noreply.github.com>
Date: Mon, 12 Jun 2023 14:28:45 +0700
Subject: [PATCH] update design button (#2)

---
 lib/src/showcase.dart | 236 +++++++++++++++++++++++++++---------------
 1 file changed, 154 insertions(+), 82 deletions(-)

diff --git a/lib/src/showcase.dart b/lib/src/showcase.dart
index a0f22aa0..450eb9a9 100644
--- a/lib/src/showcase.dart
+++ b/lib/src/showcase.dart
@@ -263,8 +263,6 @@ class ActionWithStep extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var lengthLast = length! - 1;
-
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       children: [
@@ -298,89 +296,163 @@ class ActionWithStep extends StatelessWidget {
               ),
             ),
             SizedBox(width: 14.w),
-            currentPage == lengthLast
-                ? Row(
-                    children: [
-                      Container(
-                        alignment: Alignment.center,
-                        decoration: BoxDecoration(
-                          color: Colors.transparent,
-                          shape: BoxShape.circle,
-                          border: Border.all(
-                            color: kShowCaseNeutral0,
-                            width: 1.w,
-                          ),
-                        ),
-                        child: IconButton(
-                          constraints: BoxConstraints(
-                            maxHeight: 32.w,
-                            maxWidth: 32.w,
-                          ),
-                          padding: EdgeInsets.all(4.w),
-                          iconSize: 24.w,
-                          onPressed: previousButton,
-                          icon: Center(
-                            child: Icon(
-                              Icons.chevron_left,
-                              color: kShowCaseNeutral0,
-                            ),
-                          ),
-                        ),
-                      ),
-                      SizedBox(width: 8.w),
-                      Container(
-                        alignment: Alignment.center,
-                        decoration: BoxDecoration(
-                          color: kShowCaseLightAccent,
-                          shape: BoxShape.circle,
-                          border: Border.all(
-                            color: kShowCaseLightAccent,
-                            width: 1.w,
-                          ),
-                        ),
-                        child: IconButton(
-                          constraints: BoxConstraints(
-                            maxHeight: 32.w,
-                            maxWidth: 32.w,
-                          ),
-                          padding: EdgeInsets.all(4.w),
-                          iconSize: 24.w,
-                          onPressed: finishButton,
-                          icon: Center(
-                            child: Icon(
-                              Icons.check,
-                              color: kShowCaseNeutral1000,
-                            ),
-                          ),
-                        ),
-                      ),
-                    ],
-                  )
-                : Container(
-                    alignment: Alignment.center,
-                    decoration: BoxDecoration(
-                      color: kShowCaseLightAccent,
-                      shape: BoxShape.circle,
-                    ),
-                    child: IconButton(
-                      constraints: BoxConstraints(
-                        maxHeight: 32.w,
-                        maxWidth: 32.w,
-                      ),
-                      padding: EdgeInsets.all(4.w),
-                      iconSize: 24.w,
-                      onPressed: nextButton,
-                      icon: Center(
-                        child: Icon(
-                          Icons.chevron_right,
-                          color: kShowCaseNeutral1000,
-                        ),
-                      ),
-                    ),
-                  ),
+            _button(),
           ],
         )
       ],
     );
   }
+
+  Widget _button() {
+    var lengthLast = length! - 1;
+
+    if (currentPage == lengthLast) {
+      return _lastPage();
+    } else if (currentPage == 0) {
+      return _firstPage();
+    } else {
+      return _middlePage();
+    }
+  }
+
+  Widget _lastPage() {
+    return Row(
+      children: [
+        Container(
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            color: Colors.transparent,
+            shape: BoxShape.circle,
+            border: Border.all(
+              color: kShowCaseNeutral0,
+              width: 1.w,
+            ),
+          ),
+          child: IconButton(
+            constraints: BoxConstraints(
+              maxHeight: 32.w,
+              maxWidth: 32.w,
+            ),
+            padding: EdgeInsets.all(4.w),
+            iconSize: 24.w,
+            onPressed: previousButton,
+            icon: Center(
+              child: Icon(
+                Icons.chevron_left,
+                color: kShowCaseNeutral0,
+              ),
+            ),
+          ),
+        ),
+        SizedBox(width: 8.w),
+        Container(
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            color: kShowCaseLightAccent,
+            shape: BoxShape.circle,
+            border: Border.all(
+              color: kShowCaseLightAccent,
+              width: 1.w,
+            ),
+          ),
+          child: IconButton(
+            constraints: BoxConstraints(
+              maxHeight: 32.w,
+              maxWidth: 32.w,
+            ),
+            padding: EdgeInsets.all(4.w),
+            iconSize: 24.w,
+            onPressed: finishButton,
+            icon: Center(
+              child: Icon(
+                Icons.check,
+                color: kShowCaseNeutral1000,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _middlePage() {
+    return Row(
+      children: [
+        Container(
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            color: Colors.transparent,
+            shape: BoxShape.circle,
+            border: Border.all(
+              color: kShowCaseNeutral0,
+              width: 1.w,
+            ),
+          ),
+          child: IconButton(
+            constraints: BoxConstraints(
+              maxHeight: 32.w,
+              maxWidth: 32.w,
+            ),
+            padding: EdgeInsets.all(4.w),
+            iconSize: 24.w,
+            onPressed: previousButton,
+            icon: Center(
+              child: Icon(
+                Icons.chevron_left,
+                color: kShowCaseNeutral0,
+              ),
+            ),
+          ),
+        ),
+        SizedBox(width: 8.w),
+        Container(
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            color: kShowCaseLightAccent,
+            shape: BoxShape.circle,
+          ),
+          child: IconButton(
+            constraints: BoxConstraints(
+              maxHeight: 32.w,
+              maxWidth: 32.w,
+            ),
+            padding: EdgeInsets.all(4.w),
+            iconSize: 24.w,
+            onPressed: nextButton,
+            icon: Center(
+              child: Icon(
+                Icons.chevron_right,
+                color: kShowCaseNeutral1000,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _firstPage() {
+    return Container(
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        color: kShowCaseLightAccent,
+        shape: BoxShape.circle,
+      ),
+      child: IconButton(
+        constraints: BoxConstraints(
+          maxHeight: 32.w,
+          maxWidth: 32.w,
+        ),
+        padding: EdgeInsets.all(4.w),
+        iconSize: 24.w,
+        onPressed: nextButton,
+        icon: Center(
+          child: Icon(
+            Icons.chevron_right,
+            color: kShowCaseNeutral1000,
+          ),
+        ),
+      ),
+    );
+  }
 }