147 lines
4.8 KiB
Dart
147 lines
4.8 KiB
Dart
|
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";
|
||
|
}
|
||
|
|
||
|
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),
|
||
|
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));
|
||
|
}
|
||
|
},
|
||
|
),
|
||
|
);
|
||
|
}
|
||
|
}
|