2023-03-17 09:41:28 +01:00
|
|
|
import 'package:flutter/material.dart';
|
2023-03-28 14:54:39 +02:00
|
|
|
import 'package:go_router/go_router.dart';
|
2023-03-24 17:47:47 +01:00
|
|
|
import 'package:outbag_app/tools/assets.dart';
|
2023-03-17 09:41:28 +01:00
|
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
2023-03-29 15:14:27 +02:00
|
|
|
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
|
2023-03-17 09:41:28 +01:00
|
|
|
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);
|
|
|
|
|
2023-03-29 15:14:27 +02:00
|
|
|
String fabText = AppLocalizations.of(context)!.next;
|
2023-03-17 09:41:28 +01:00
|
|
|
if (_currentPage == 0) {
|
2023-03-29 15:14:27 +02:00
|
|
|
fabText = AppLocalizations.of(context)!.letsGo;
|
2023-03-17 09:41:28 +01:00
|
|
|
} else if (_currentPage == 4 - 1) {
|
2023-03-29 15:14:27 +02:00
|
|
|
fabText = AppLocalizations.of(context)!.signUp;
|
2023-03-17 09:41:28 +01:00
|
|
|
}
|
2023-03-29 15:14:27 +02:00
|
|
|
String fabTooltip = AppLocalizations.of(context)!.continueTour;
|
2023-03-17 21:06:54 +01:00
|
|
|
if (_currentPage == 0) {
|
2023-03-29 15:14:27 +02:00
|
|
|
fabTooltip = AppLocalizations.of(context)!.takeTour;
|
2023-03-17 21:06:54 +01:00
|
|
|
} else if (_currentPage == 4 - 1) {
|
2023-03-29 15:14:27 +02:00
|
|
|
fabTooltip = AppLocalizations.of(context)!.createNewAccount;
|
2023-03-17 21:06:54 +01:00
|
|
|
}
|
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>[
|
2023-03-24 17:47:47 +01:00
|
|
|
SvgPicture.asset(asset("undraw/undraw_shopping_app.svg"),
|
2023-03-17 09:41:28 +01:00
|
|
|
fit: BoxFit.contain,
|
2023-03-28 14:54:39 +02:00
|
|
|
width: smallest * 0.5,
|
|
|
|
height: smallest * 0.5),
|
2023-03-17 09:41:28 +01:00
|
|
|
Text(
|
2023-03-29 15:14:27 +02:00
|
|
|
AppLocalizations.of(context)!.welcomeTitle,
|
2023-03-17 09:41:28 +01:00
|
|
|
style: textTheme.displaySmall,
|
|
|
|
),
|
2023-03-29 15:14:27 +02:00
|
|
|
Text(
|
|
|
|
AppLocalizations.of(context)!.welcomeSubtitle,
|
|
|
|
style: textTheme.bodyMedium
|
|
|
|
)
|
2023-03-17 09:41:28 +01:00
|
|
|
],
|
|
|
|
),
|
|
|
|
Column(
|
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
children: <Widget>[
|
2023-03-24 17:47:47 +01:00
|
|
|
SvgPicture.asset(asset("undraw/undraw_mobile_login.svg"),
|
2023-03-17 09:41:28 +01:00
|
|
|
fit: BoxFit.contain,
|
2023-03-28 14:54:39 +02:00
|
|
|
width: smallest * 0.5,
|
|
|
|
height: smallest * 0.5),
|
2023-03-17 09:41:28 +01:00
|
|
|
Text(
|
2023-03-29 15:14:27 +02:00
|
|
|
AppLocalizations.of(context)!.page2Title,
|
2023-03-17 09:41:28 +01:00
|
|
|
style: textTheme.displaySmall,
|
|
|
|
),
|
2023-03-29 15:14:27 +02:00
|
|
|
Text(
|
|
|
|
AppLocalizations.of(context)!.page2Subtitle,
|
2023-03-17 09:41:28 +01:00
|
|
|
style: textTheme.bodyMedium)
|
|
|
|
],
|
|
|
|
),
|
|
|
|
Column(
|
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
children: <Widget>[
|
2023-03-24 17:47:47 +01:00
|
|
|
SvgPicture.asset(asset("undraw/undraw_online_connection.svg"),
|
2023-03-17 09:41:28 +01:00
|
|
|
fit: BoxFit.contain,
|
2023-03-28 14:54:39 +02:00
|
|
|
width: smallest * 0.5,
|
|
|
|
height: smallest * 0.5),
|
2023-03-17 09:41:28 +01:00
|
|
|
Text(
|
2023-03-29 15:14:27 +02:00
|
|
|
AppLocalizations.of(context)!.page3Title,
|
2023-03-17 09:41:28 +01:00
|
|
|
style: textTheme.displaySmall,
|
|
|
|
),
|
2023-03-29 15:14:27 +02:00
|
|
|
Text(
|
|
|
|
AppLocalizations.of(context)!.page3Subtitle,
|
2023-03-17 09:41:28 +01:00
|
|
|
style: textTheme.bodyMedium)
|
|
|
|
],
|
|
|
|
),
|
|
|
|
Column(
|
|
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
children: <Widget>[
|
2023-03-24 17:47:47 +01:00
|
|
|
SvgPicture.asset(asset("undraw/undraw_online_groceries.svg"),
|
2023-03-17 09:41:28 +01:00
|
|
|
fit: BoxFit.contain,
|
2023-03-28 14:54:39 +02:00
|
|
|
width: smallest * 0.5,
|
|
|
|
height: smallest * 0.5),
|
2023-03-17 09:41:28 +01:00
|
|
|
Text(
|
2023-03-29 15:14:27 +02:00
|
|
|
AppLocalizations.of(context)!.page4Title,
|
2023-03-17 09:41:28 +01:00
|
|
|
style: textTheme.displaySmall,
|
|
|
|
),
|
2023-03-29 15:14:27 +02:00
|
|
|
Text(
|
|
|
|
AppLocalizations.of(context)!.page4Subtitle,
|
2023-03-17 09:41:28 +01:00
|
|
|
style: textTheme.bodyMedium)
|
|
|
|
],
|
|
|
|
),
|
|
|
|
],
|
|
|
|
)),
|
|
|
|
TextButton(
|
|
|
|
onPressed: () {
|
2023-03-28 14:54:39 +02:00
|
|
|
context.goNamed('signin');
|
2023-03-17 09:41:28 +01:00
|
|
|
},
|
2023-03-29 15:14:27 +02:00
|
|
|
child: Text(AppLocalizations.of(context)!.userHasAnAccount
|
|
|
|
),
|
2023-03-17 09:41:28 +01:00
|
|
|
)
|
|
|
|
],
|
|
|
|
),
|
|
|
|
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
|
2023-03-28 14:54:39 +02:00
|
|
|
context.goNamed('signup');
|
2023-03-17 09:41:28 +01:00
|
|
|
} else {
|
|
|
|
// move to next page
|
|
|
|
controller.nextPage(
|
|
|
|
curve: Curves.easeInOut,
|
|
|
|
duration: const Duration(milliseconds: 300));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|