Very basic help screen for navigation screen

lib/src/screens/navigation/help.dart

@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+
+import '../help_slides.dart';
+
+class NavigationHelpScreen extends StatefulWidget {
+  const NavigationHelpScreen({super.key});
+
+  @override
+  State<StatefulWidget> createState() => _NavigationHelpScreenState();
+}
+
+class _NavigationHelpScreenState extends State<NavigationHelpScreen> {
+  final HelpSlidesController _controller = HelpSlidesController();
+
+  @override
+  Widget build(BuildContext context) {
+    return HelpSlidesScreen(
+      controller: _controller,
+      onDone: () {
+        Navigator.of(context).pop();
+      },
+      slides: [
+        HelpSlide(
+          children: [
+            Text(
+              "Navigation Mode",
+              style: Theme.of(context).textTheme.headlineSmall,
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16.0),
+            Text(
+              "In navigation mode, you can view a map of a tour and its surrounding areas. "
+              "While the map is open, audio narrations about the stops you visit will automatically play.",
+              style: Theme.of(context).textTheme.bodyLarge,
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 8.0),
+            Padding(
+              padding: const EdgeInsets.symmetric(
+                vertical: 12.0,
+                horizontal: 48.0,
+              ),
+              child: ElevatedButton(
+                onPressed: _controller.nextSlide,
+                child: Text(
+                  "Next",
+                  style: Theme.of(context).textTheme.labelLarge!.copyWith(
+                        fontSize: 16,
+                        color: Theme.of(context).colorScheme.onPrimary,
+                      ),
+                ),
+              ),
+            ),
+          ],
+        ),
+        HelpSlide(
+          children: [
+            Text(
+              "Using the Map",
+              style: Theme.of(context).textTheme.headlineSmall,
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16.0),
+            Text(
+              "Use your fingers to move and zoom the map.",
+              style: Theme.of(context).textTheme.bodyLarge,
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16.0),
+            Text(
+              "Tap on markers to open an info page including a helpful Directions button "
+              "that links to your phone's navigation app with directions to the stop.",
+              style: Theme.of(context).textTheme.bodyLarge,
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 8.0),
+            Padding(
+              padding: const EdgeInsets.symmetric(
+                vertical: 12.0,
+                horizontal: 48.0,
+              ),
+              child: ElevatedButton(
+                onPressed: _controller.finish,
+                child: Text(
+                  "Got it",
+                  style: Theme.of(context).textTheme.labelLarge!.copyWith(
+                        fontSize: 16,
+                        color: Theme.of(context).colorScheme.onPrimary,
+                      ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

lib/src/screens/navigation/navigation.dart

@@ -8,14 +8,15 @@ import 'package:provider/provider.dart';
 
 import '../../controllers/narration_playback.dart';
 import '../../controllers/navigation.dart';
+import '../../data.dart';
 import '../../location.dart';
 import '../../models/current_location.dart';
 import '../../models/current_waypoint.dart';
-import '../../data.dart';
 import '../../models/fake_gps.dart';
 import '../../models/map_controlledness.dart';
 import '../../models/satellite_enabled.dart';
 import '../../screens/navigation/drawer.dart';
+import '../../screens/navigation/help.dart';
 import '../../screens/navigation/map.dart';
 import '../../screens/navigation/panel.dart';
 import '../../screens/poi_details.dart';
@@ -359,7 +360,7 @@ class _NavigationScreenState extends State<NavigationScreen> {
                 child: SafeArea(
                   child: Padding(
                     padding: EdgeInsets.all(8.0),
-                    child: _SatelliteEnabledButton(),
+                    child: _HelpButton(),
                   ),
                 ),
               ),
@@ -374,7 +375,7 @@ class _NavigationScreenState extends State<NavigationScreen> {
               ),
               if (kDebugMode)
                 const Positioned(
-                  bottom: bottomHeight + drawerHandleHeight + 72,
+                  bottom: bottomHeight + drawerHandleHeight + 72 * 2,
                   right: 0.0,
                   child: SafeArea(
                     child: Padding(
@@ -383,6 +384,16 @@ class _NavigationScreenState extends State<NavigationScreen> {
                     ),
                   ),
                 ),
+              const Positioned(
+                bottom: bottomHeight + drawerHandleHeight + 72,
+                right: 0.0,
+                child: SafeArea(
+                  child: Padding(
+                    padding: EdgeInsets.all(8.0),
+                    child: _SatelliteEnabledButton(),
+                  ),
+                ),
+              ),
               const Positioned(
                 bottom: bottomHeight + drawerHandleHeight,
                 right: 0.0,
@@ -449,7 +460,7 @@ class _SatelliteEnabledButton extends StatelessWidget {
 
     return Material(
       borderRadius: const BorderRadius.all(Radius.circular(30)),
-      color: Theme.of(context).colorScheme.secondary,
+      color: const Color.fromARGB(255, 48, 48, 48),
       child: SizedBox(
         width: 60,
         height: 60,
@@ -469,6 +480,34 @@ class _SatelliteEnabledButton extends StatelessWidget {
   }
 }
 
+class _HelpButton extends StatelessWidget {
+  const _HelpButton({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      borderRadius: const BorderRadius.all(Radius.circular(30)),
+      color: Theme.of(context).colorScheme.secondary,
+      child: SizedBox(
+        width: 60,
+        height: 60,
+        child: IconButton(
+          onPressed: () {
+            Navigator.of(context).push(MaterialPageRoute(
+                builder: (context) => const NavigationHelpScreen()));
+          },
+          iconSize: 32,
+          splashRadius: 30,
+          color: Theme.of(context).colorScheme.onSecondary,
+          icon: const Icon(Icons.question_mark),
+        ),
+      ),
+    );
+  }
+}
+
 class _FakeGpsButton extends StatelessWidget {
   const _FakeGpsButton({
     Key? key,