2023-03-17 09:41:28 +01:00
|
|
|
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<WelcomePage> createState() => _WelcomePageState();
|
|
|
|
}
|
|
|
|
|
|
|
|
class _WelcomePageState extends State<WelcomePage> {
|
|
|
|
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";
|
|
|
|
}
|
2023-03-17 21:06:54 +01:00
|
|
|
String fabTooltip = "Continue Tour";
|
|
|
|
if (_currentPage == 0) {
|
|
|
|
fabTooltip = "Take Tour";
|
|
|
|
} else if (_currentPage == 4 - 1) {
|
|
|
|
fabTooltip = "Create an account";
|
|
|
|
}
|
2023-03-17 09:41:28 +01:00
|
|
|
|
|
|
|
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: <Widget>[
|
|
|
|
Column(
|
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
children: <Widget>[
|
|
|
|
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: <Widget>[
|
|
|
|
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: <Widget>[
|
|
|
|
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: <Widget>[
|
|
|
|
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),
|
2023-03-17 21:06:54 +01:00
|
|
|
tooltip: fabTooltip,
|
2023-03-17 09:41:28 +01:00
|
|
|
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));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|