Added basic welcome screen
This commit is contained in:
parent
2cbb8fb701
commit
39d7a14b4a
1 changed files with 146 additions and 0 deletions
146
lib/screens/welcome.dart
Normal file
146
lib/screens/welcome.dart
Normal file
|
@ -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<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));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue