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 7a214d3..db69eb2 100644 --- a/frontend/lib/layout.dart +++ b/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 { 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(); } 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.lock b/frontend/pubspec.lock index 6f808e0..8326f37 100644 --- a/frontend/pubspec.lock +++ b/frontend/pubspec.lock @@ -1,6 +1,14 @@ # Generated by pub # See https://dart.dev/tools/pub/glossary#lockfile packages: + args: + dependency: transitive + description: + name: args + sha256: "7cf60b9f0cc88203c5a190b4cd62a99feea42759a7fa695010eb5de1c0b2252a" + url: "https://pub.dev" + source: hosted + version: "2.5.0" async: dependency: transitive description: @@ -174,6 +182,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.0.21" + flutter_svg: + dependency: "direct main" + description: + name: flutter_svg + sha256: "7b4ca6cf3304575fe9c8ec64813c8d02ee41d2afe60bcfe0678bcb5375d596a2" + url: "https://pub.dev" + source: hosted + version: "2.0.10+1" flutter_test: dependency: "direct dev" description: flutter @@ -292,18 +308,18 @@ packages: dependency: transitive description: name: leak_tracker - sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a" + sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05" url: "https://pub.dev" source: hosted - version: "10.0.4" + version: "10.0.5" leak_tracker_flutter_testing: dependency: transitive description: name: leak_tracker_flutter_testing - sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8" + sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806" url: "https://pub.dev" source: hosted - version: "3.0.3" + version: "3.0.5" leak_tracker_testing: dependency: transitive description: @@ -332,18 +348,18 @@ packages: dependency: transitive description: name: material_color_utilities - sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a" + sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec url: "https://pub.dev" source: hosted - version: "0.8.0" + version: "0.11.1" meta: dependency: transitive description: name: meta - sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136" + sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7 url: "https://pub.dev" source: hosted - version: "1.12.0" + version: "1.15.0" nested: dependency: transitive description: @@ -368,6 +384,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.9.0" + path_parsing: + dependency: transitive + description: + name: path_parsing + sha256: e3e67b1629e6f7e8100b367d3db6ba6af4b1f0bb80f64db18ef1fbabd2fa9ccf + url: "https://pub.dev" + source: hosted + version: "1.0.1" path_provider: dependency: transitive description: @@ -416,6 +440,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.3.0" + petitparser: + dependency: transitive + description: + name: petitparser + sha256: c15605cd28af66339f8eb6fbe0e541bfe2d1b72d5825efc6598f3e0a31b9ad27 + url: "https://pub.dev" + source: hosted + version: "6.0.2" platform: dependency: transitive description: @@ -609,10 +641,10 @@ packages: dependency: transitive description: name: test_api - sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f" + sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb" url: "https://pub.dev" source: hosted - version: "0.7.0" + version: "0.7.2" typed_data: dependency: transitive description: @@ -629,6 +661,30 @@ packages: url: "https://pub.dev" source: hosted version: "4.4.2" + vector_graphics: + dependency: transitive + description: + name: vector_graphics + sha256: "32c3c684e02f9bc0afb0ae0aa653337a2fe022e8ab064bcd7ffda27a74e288e3" + url: "https://pub.dev" + source: hosted + version: "1.1.11+1" + vector_graphics_codec: + dependency: transitive + description: + name: vector_graphics_codec + sha256: c86987475f162fadff579e7320c7ddda04cd2fdeffbe1129227a85d9ac9e03da + url: "https://pub.dev" + source: hosted + version: "1.1.11+1" + vector_graphics_compiler: + dependency: transitive + description: + name: vector_graphics_compiler + sha256: "12faff3f73b1741a36ca7e31b292ddeb629af819ca9efe9953b70bd63fc8cd81" + url: "https://pub.dev" + source: hosted + version: "1.1.11+1" vector_math: dependency: transitive description: @@ -641,10 +697,10 @@ packages: dependency: transitive description: name: vm_service - sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec" + sha256: f652077d0bdf60abe4c1f6377448e8655008eef28f128bc023f7b5e8dfeb48fc url: "https://pub.dev" source: hosted - version: "14.2.1" + version: "14.2.4" web: dependency: transitive description: @@ -669,6 +725,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.0.4" + xml: + dependency: transitive + description: + name: xml + sha256: b015a8ad1c488f66851d762d3090a21c600e479dc75e68328c52774040cf9226 + url: "https://pub.dev" + source: hosted + version: "6.5.0" sdks: dart: ">=3.4.0 <4.0.0" flutter: ">=3.22.0" diff --git a/frontend/pubspec.yaml b/frontend/pubspec.yaml index bb46eb7..f8da74e 100644 --- a/frontend/pubspec.yaml +++ b/frontend/pubspec.yaml @@ -45,6 +45,7 @@ dependencies: widget_to_marker: ^1.0.6 provider: ^6.1.2 auto_size_text: ^3.0.0 + flutter_svg: ^2.0.10+1 dev_dependencies: flutter_test: @@ -69,8 +70,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