diff --git a/lib/screens/welcome.dart b/lib/screens/welcome.dart new file mode 100644 index 0000000..46cfafa --- /dev/null +++ b/lib/screens/welcome.dart @@ -0,0 +1,146 @@ +import 'package:flutter/material.dart'; +import 'package:routemaster/routemaster.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'dart:math'; + +class WelcomePage extends StatefulWidget { + const WelcomePage({super.key}); + + @override + State createState() => _WelcomePageState(); +} + +class _WelcomePageState extends State { + final PageController controller = PageController(); + int _currentPage = 0; + + @override + void initState() { + super.initState(); + + _currentPage = controller.initialPage; + controller.addListener(() { + setState(() { + _currentPage = controller.page?.toInt() ?? controller.initialPage; + }); + }); + } + + @override + Widget build(BuildContext context) { + final textTheme = Theme.of(context) + .textTheme + .apply(displayColor: Theme.of(context).colorScheme.onSurface); + + String fabText = "Next"; + if (_currentPage == 0) { + fabText = "Let's go"; + } else if (_currentPage == 4 - 1) { + fabText = "Sign up"; + } + + double width = MediaQuery.of(context).size.width; + double height = MediaQuery.of(context).size.height; + + double smallest = min(width, height); + + return Scaffold( + body: Column( + children: [ + Expanded( + child: PageView( + controller: controller, + children: [ + Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SvgPicture.asset("undraw/undraw_shopping_app.svg", + fit: BoxFit.contain, + width: smallest*0.5, + height: smallest*0.5 + ), + Text( + 'Welcome to Outbag', + style: textTheme.displaySmall, + ), + Text('Shopping lists made easy', style: textTheme.bodyMedium) + ], + ), + Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SvgPicture.asset("undraw/undraw_mobile_login.svg", + fit: BoxFit.contain, + width: smallest*0.5, + height: smallest*0.5), + Text( + 'Open. Decentralized', + style: textTheme.displaySmall, + ), + Text('One account, multiple servers', + style: textTheme.bodyMedium) + ], + ), + Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SvgPicture.asset("undraw/undraw_online_connection.svg", + fit: BoxFit.contain, + width: smallest*0.5, + height: smallest*0.5), + Text( + 'Made to share', + style: textTheme.displaySmall, + ), + Text('Collaborate on your shopping list in real time', + style: textTheme.bodyMedium) + ], + ), + Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SvgPicture.asset("undraw/undraw_online_groceries.svg", + fit: BoxFit.contain, + width: smallest*0.5, + height: smallest*0.5), + Text( + 'Pocket-sized', + style: textTheme.displaySmall, + ), + Text('Always have your shopping list with you', + style: textTheme.bodyMedium) + ], + ), + ], + )), + TextButton( + onPressed: () { + Routemaster.of(context).push("/signin"); + }, + child: const Text('I already have an account'), + ) + ], + ), + floatingActionButton: FloatingActionButton.extended( + icon: const Icon(Icons.chevron_right), + label: Text(fabText), + tooltip: 'Continue tour', + onPressed: () { + if (controller.page == 4 - 1) { + // open signup screen + Routemaster.of(context).push("/signup"); + } else { + // move to next page + controller.nextPage( + curve: Curves.easeInOut, + duration: const Duration(milliseconds: 300)); + } + }, + ), + ); + } +}