onboarding screen proof of concept

frontend/lib/layout.dart

@@ -10,7 +10,7 @@ import 'package:anyway/modules/trips_overview.dart';
 import 'package:anyway/utils/load_trips.dart';
 
 import 'package:anyway/pages/new_trip.dart';
-import 'package:anyway/pages/tutorial.dart';
+import 'package:anyway/pages/onboarding.dart';
 import 'package:anyway/pages/overview.dart';
 import 'package:anyway/pages/profile.dart';
 
@@ -41,7 +41,7 @@ class _BasePageState extends State<BasePage> {
     if (widget.mainScreen == "map") {
       currentView = NavigationOverview(trip: widget.trip ?? getFirstTrip(trips));
     } else if (widget.mainScreen == "tutorial") {
-      currentView = TutorialPage();
+      currentView = OnboardingPage();
     } else if (widget.mainScreen == "profile") {
       currentView = ProfilePage();
     }

frontend/lib/modules/onboarding_card.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class OnboardingCard extends StatelessWidget {
+  int index;
+  String title;
+  String description;
+  String imagePath;
+
+  OnboardingCard({
+    required this.index,
+    required this.title,
+    required this.description,
+    required this.imagePath,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Color baseColor = Theme.of(context).primaryColor;
+    // have a different color for each card, incrementing the hue
+    Color currentColor = baseColor.withAlpha(baseColor.alpha - index * 30);
+    return Container(
+      color: currentColor,
+      child: Padding(
+        padding: EdgeInsets.all(20),
+        child: Column(
+          children: [
+            Text(
+              title,
+              style: TextStyle(
+                fontSize: 24,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            Padding(padding: EdgeInsets.only(top: 20)),
+            SvgPicture.asset(
+              imagePath,
+              height: 200,
+            ),
+            Padding(padding: EdgeInsets.only(top: 20)),
+            Text(
+              description,
+              style: TextStyle(
+                fontSize: 16,
+              ),
+            ),
+          ],
+        ),
+      )
+    );
+  }
+}

frontend/lib/pages/onboarding.dart

@@ -0,0 +1,47 @@
+import 'package:anyway/modules/onboarding_card.dart';
+import 'package:anyway/pages/new_trip.dart';
+import 'package:flutter/material.dart';
+
+class OnboardingPage extends StatefulWidget {
+  const OnboardingPage({super.key});
+
+  @override
+  State<OnboardingPage> createState() => _OnboardingPageState();
+}
+
+class _OnboardingPageState extends State<OnboardingPage> {
+  @override
+  Widget build(BuildContext context) {
+    final PageController _controller = PageController();
+    return Scaffold(
+      body: Stack(
+        children: [
+          PageView(
+            // horizontally scrollable list of pages
+            controller: _controller,
+            
+            children: [
+              OnboardingCard(index: 1, title: "Welcome to anyway!", description: "Anyway helps you plan a city trip that suits your wishes.", imagePath: "assets/city.svg"),
+              OnboardingCard(index: 2, title: "Find your way", description: "Bored by churches? No problem! Hate shopping? No worries! More than showing you the typical 'must-sees' of a city, anyway will try to give you recommendations that really suit you.", imagePath: "assets/plan.svg"),
+              OnboardingCard(index: 3, title: "Change your mind", description: "Life happens when you're busy making plans. Anyway understands that! Move or remove destinations, visit hidden gems along your journey, do your own thing. Anyway adapts to your spontaneous decisions.", imagePath: "assets/cat.svg"),
+            ],
+          ),
+        ],
+      ),
+      floatingActionButton: FloatingActionButton(
+         onPressed: () {
+            if (_controller.page == 2) {
+              Navigator.of(context).push(
+                MaterialPageRoute(
+                  builder: (context) => const NewTripPage()
+                )
+              );
+            } else {
+              _controller.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease);
+            }
+          },
+          child: Icon(Icons.arrow_forward),
+      ),
+    );
+  }
+}

frontend/lib/pages/tutorial.dart

@@ -1,27 +0,0 @@
-import 'package:flutter/material.dart';
-
-
-
-class TutorialPage extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text("Tutorial"),
-      ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Text(
-              'Welcome to the tutorial page!',
-            ),
-            Text(
-              'This is where you will learn how to use the app.',
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}