From 4baf045c8c23731e44b8afa2b13e3b9116e989b0 Mon Sep 17 00:00:00 2001 From: Remy Moll Date: Mon, 2 Dec 2024 10:43:42 +0100 Subject: [PATCH] better onboarding --- ...otlin-compiler-17075128324497521906.salive | 0 frontend/assets/confused.svg | 427 ++++++++++++++++++ frontend/lib/pages/onboarding.dart | 91 ++-- 3 files changed, 475 insertions(+), 43 deletions(-) delete mode 100644 frontend/android/.kotlin/sessions/kotlin-compiler-17075128324497521906.salive create mode 100644 frontend/assets/confused.svg diff --git a/frontend/android/.kotlin/sessions/kotlin-compiler-17075128324497521906.salive b/frontend/android/.kotlin/sessions/kotlin-compiler-17075128324497521906.salive deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/assets/confused.svg b/frontend/assets/confused.svg new file mode 100644 index 0000000..e5182a2 --- /dev/null +++ b/frontend/assets/confused.svg @@ -0,0 +1,427 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/lib/pages/onboarding.dart b/frontend/lib/pages/onboarding.dart index 0f5dc25..ff335e8 100644 --- a/frontend/lib/pages/onboarding.dart +++ b/frontend/lib/pages/onboarding.dart @@ -2,7 +2,6 @@ import 'package:anyway/modules/onboarding_card.dart'; import 'package:anyway/pages/new_trip_location.dart'; import 'package:flutter/material.dart'; - const List onboardingCards = [ OnboardingCard( title: "Welcome to anyway!", @@ -19,9 +18,13 @@ const List onboardingCards = [ description: "Feet get sore, the weather changes. 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" ), + OnboardingCard( + title: "Feeling lost?", + description: "Whenever you are confused or need help with the app, look out for the question mark in the top right corner. Help is just a tap away!", + imagePath: "assets/confused.svg" + ), ]; - class OnboardingPage extends StatefulWidget { const OnboardingPage({super.key}); @@ -37,55 +40,57 @@ class _OnboardingPageState extends State { return Scaffold( body: Stack( children: [ - // horizontally scrollable list of pages - PageView( - controller: _controller, - - children: List.generate( - onboardingCards.length, - (index) { - Color currentColor = Colors.red.withAlpha(Colors.red.alpha - index * 30); - return Container( - color: currentColor, - alignment: Alignment.center, - child: onboardingCards[index], - ); - } - ) + Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [Colors.red, Colors.blue], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), + child: PageView( + controller: _controller, + children: List.generate( + onboardingCards.length, + (index) { + return Container( + alignment: Alignment.center, + child: onboardingCards[index], + ); + } + ), + ), ), ], ), - floatingActionButton: FloatingActionButton.extended( - onPressed: () { + onPressed: () { + if (_controller.page == onboardingCards.length - 1) { + Navigator.of(context).push( + MaterialPageRoute( + builder: (context) => const NewTripPage() + ) + ); + } else { + _controller.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease); + } + }, + label: ListenableBuilder( + listenable: _controller, + builder: (context, child) { if (_controller.page == onboardingCards.length - 1) { - Navigator.of(context).push( - MaterialPageRoute( - builder: (context) => const NewTripPage() - ) + return Row( + children: [ + const Text("Start planning!"), + Padding(padding: const EdgeInsets.only(right: 8.0)), + const Icon(Icons.map_outlined) + ], ); } else { - _controller.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease); + return const Icon(Icons.arrow_forward); } - }, - label: ListenableBuilder( - listenable: _controller, - builder: (context, child) { - if (_controller.page == onboardingCards.length - 1) { - // icon and text side by side - return Row( - children: [ - const Text("Start planning!"), - Padding(padding: const EdgeInsets.only(right: 8.0)), - const Icon(Icons.map_outlined) - ], - ); - - } else { - return const Icon(Icons.arrow_forward); - } - } - ) + } + ) ), ); }