From d4c470e9c1a8c60a81c70f8ee737936e42be5b8f Mon Sep 17 00:00:00 2001
From: Brett Morgan <brett.morgan@gmail.com>
Date: Fri, 2 Jun 2023 06:32:17 +1000
Subject: [PATCH] `next_gen_ui_demo`: Make the tape player analogy complete
 (#1859)

---
 next_gen_ui_demo/lib/main.dart | 52 ++++++++++++++++------------------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/next_gen_ui_demo/lib/main.dart b/next_gen_ui_demo/lib/main.dart
index 9a6a4f95f..145738f56 100644
--- a/next_gen_ui_demo/lib/main.dart
+++ b/next_gen_ui_demo/lib/main.dart
@@ -111,9 +111,17 @@ class _NextGenAppState extends State<NextGenApp> {
         floatingActionButton: Row(
           mainAxisSize: MainAxisSize.min,
           children: [
-            Visibility(
-              visible: step > 0,
-              child: FloatingActionButton(
+            if (step > 0) ...[
+              FloatingActionButton(
+                child: const Icon(Icons.first_page),
+                onPressed: () {
+                  setState(() {
+                    step = 0;
+                  });
+                },
+              ),
+              const Gap(24),
+              FloatingActionButton(
                 child: const Icon(Icons.arrow_back),
                 onPressed: () {
                   setState(() {
@@ -121,14 +129,10 @@ class _NextGenAppState extends State<NextGenApp> {
                   });
                 },
               ),
-            ),
-            Visibility(
-              visible: step > 0 && step + 1 < steps.length,
-              child: const Gap(24),
-            ),
-            Visibility(
-              visible: step + 1 < steps.length,
-              child: FloatingActionButton(
+            ],
+            if (step > 0 && step + 1 < steps.length) const Gap(24),
+            if (step + 1 < steps.length) ...[
+              FloatingActionButton(
                 child: const Icon(Icons.arrow_forward),
                 onPressed: () {
                   setState(() {
@@ -136,24 +140,16 @@ class _NextGenAppState extends State<NextGenApp> {
                   });
                 },
               ),
-            ),
-            Visibility(
-              visible: step + 1 == steps.length,
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  const Gap(24),
-                  FloatingActionButton(
-                    child: const Icon(Icons.restart_alt),
-                    onPressed: () {
-                      setState(() {
-                        step = 0;
-                      });
-                    },
-                  ),
-                ],
+              const Gap(24),
+              FloatingActionButton(
+                child: const Icon(Icons.last_page),
+                onPressed: () {
+                  setState(() {
+                    step = steps.length - 1;
+                  });
+                },
               ),
-            ),
+            ],
           ],
         ),
         backgroundColor: Colors.black,