feat(#259): add first tutorial page to main page

app/lib/common/widgets/tutorial/container.dart

@@ -50,20 +50,15 @@ class TutorialContainer extends HookWidget {
           fontSize: PharMeTheme.textTheme.headlineSmall!.fontSize,
         ),
       ),
-      if (content != null || asset != null) Padding(
+      if (content != null) Padding(
         padding: EdgeInsetsDirectional.only(top: PharMeTheme.mediumSpace),
-        child: Expanded(
-          child: Center(child: SingleChildScrollView(
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              mainAxisSize: MainAxisSize.max,
-              children: [
-                if (content != null)
-                  Text.rich(content, style: PharMeTheme.textTheme.bodyLarge),
-                if (asset != null) asset,
-              ],
-            ),
-          )),
+        child: Text.rich(content, style: PharMeTheme.textTheme.bodyLarge),
+      ),
+      if (asset != null) Expanded(
+        child: Padding(
+          padding: EdgeInsetsDirectional.only(top: PharMeTheme.mediumSpace),
+          // child: Container(),
+          child: Center(child: asset),
         ),
       ),
       Padding(

app/lib/l10n/app_en.arb

@@ -349,7 +349,8 @@
   "tutorial_to_the_app": "Proceed to the app",
   "tutorial_initial_drug_selection_title": "Setup PharMe",
   "tutorial_initial_drug_selection_body": "As a first step, please update the list of your current medications.",
-
+  "tutorial_app_tour_1_title": "App Tour (1/5) · Navigation",
+  "tutorial_app_tour_1_body": "We would first like to guide you through the app's main functions.\n\nYou can switch between PharMe's main screens using the bottom navigation bar.\n\nIf you want to re-watch this app  tour later, you can always do so on the last screen under More.",
   "onboarding_get_started": "Get started",
   "onboarding_next": "Next",
   "onboarding_prev": "Back",

app/lib/main/pages/main.dart

@@ -42,6 +42,31 @@ class MainPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final tutorialDone = MetaData.instance.tutorialDone ?? false;
+    if (!tutorialDone) {
+      WidgetsBinding.instance.addPostFrameCallback((_) async {
+        await TutorialController().showTutorial(
+          context: context,
+          pages: [
+            TutorialContent(
+              title: (context) =>
+                context.l10n.tutorial_app_tour_1_title,
+              content: (context) => TextSpan(
+                text: context.l10n.tutorial_app_tour_1_body,
+              ),
+              assetPath:
+                'assets/images/tutorial/04_bottom_navigation_loopable.gif',
+            ),
+          ],
+          onClose: () async {
+            // TODO: set true once finished testing
+            MetaData.instance.tutorialDone = false;
+            await MetaData.save();
+          },
+          lastNextButtonText: context.l10n.tutorial_to_the_app,
+        );
+      });
+    }
     return AutoTabsScaffold(
       routes: getTabRoutesDefinition(context).map(
         (routeDefinition) => routeDefinition.pageRouteInfo

app/pubspec.yaml

@@ -66,6 +66,7 @@ flutter:
   assets:
     - assets/images/
     - assets/images/onboarding/
+    - assets/images/tutorial/
 
 flutter_icons:
   android: 'launcher_icon'