diff --git a/frontend/assets/cat.svg b/frontend/assets/cat.svg
new file mode 100644
index 0000000..f89158c
--- /dev/null
+++ b/frontend/assets/cat.svg
@@ -0,0 +1,107 @@
+
+
+
diff --git a/frontend/assets/city.svg b/frontend/assets/city.svg
new file mode 100644
index 0000000..8f4bf7a
--- /dev/null
+++ b/frontend/assets/city.svg
@@ -0,0 +1,273 @@
+
+
+
diff --git a/frontend/assets/plan.svg b/frontend/assets/plan.svg
new file mode 100644
index 0000000..62705c9
--- /dev/null
+++ b/frontend/assets/plan.svg
@@ -0,0 +1,161 @@
+
+
+
diff --git a/frontend/lib/layout.dart b/frontend/lib/layout.dart
index 1369ca2..bfadd9b 100644
--- a/frontend/lib/layout.dart
+++ b/frontend/lib/layout.dart
@@ -10,8 +10,8 @@ import 'package:anyway/modules/trips_saved_list.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/current_trip.dart';
+import 'package:anyway/pages/onboarding.dart';
import 'package:anyway/pages/profile.dart';
@@ -62,7 +62,7 @@ class _BasePageState extends State {
);
}
} else if (widget.mainScreen == "tutorial") {
- currentView = TutorialPage();
+ currentView = OnboardingPage();
} else if (widget.mainScreen == "profile") {
currentView = ProfilePage();
}
diff --git a/frontend/lib/modules/onboarding_card.dart b/frontend/lib/modules/onboarding_card.dart
new file mode 100644
index 0000000..573c82d
--- /dev/null
+++ b/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,
+ ),
+ ),
+ ],
+ ),
+ )
+ );
+ }
+}
\ No newline at end of file
diff --git a/frontend/lib/pages/onboarding.dart b/frontend/lib/pages/onboarding.dart
new file mode 100644
index 0000000..6412273
--- /dev/null
+++ b/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 createState() => _OnboardingPageState();
+}
+
+class _OnboardingPageState extends State {
+ @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),
+ ),
+ );
+ }
+}
\ No newline at end of file
diff --git a/frontend/lib/pages/tutorial.dart b/frontend/lib/pages/tutorial.dart
deleted file mode 100644
index 3b19421..0000000
--- a/frontend/lib/pages/tutorial.dart
+++ /dev/null
@@ -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: [
- Text(
- 'Welcome to the tutorial page!',
- ),
- Text(
- 'This is where you will learn how to use the app.',
- ),
- ],
- ),
- ),
- );
- }
-}
diff --git a/frontend/pubspec.yaml b/frontend/pubspec.yaml
index 67f35a5..10514e6 100644
--- a/frontend/pubspec.yaml
+++ b/frontend/pubspec.yaml
@@ -71,8 +71,8 @@ flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
- # assets:
- # - images/a_dot_burr.jpeg
+ assets:
+ - assets/
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see