refactor: go to previous step + email validation fix

This commit is contained in:
Stein Milder 2022-09-26 09:38:57 +02:00
parent 1f54717cf3
commit 7f36ab8eca
2 changed files with 112 additions and 85 deletions

View file

@ -1,6 +1,5 @@
import 'dart:collection'; import 'dart:collection';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_registration/src/model/auth_action.dart';
import 'package:flutter_registration/src/model/auth_field.dart'; import 'package:flutter_registration/src/model/auth_field.dart';
import 'package:flutter_registration/src/model/auth_step.dart'; import 'package:flutter_registration/src/model/auth_step.dart';
@ -10,7 +9,6 @@ class AuthScreen extends StatefulWidget {
required this.steps, required this.steps,
required this.submitBtnTitle, required this.submitBtnTitle,
required this.onFinish, required this.onFinish,
this.actions,
super.key, super.key,
}) : assert(steps.length > 0, 'At least one step is required'); }) : assert(steps.length > 0, 'At least one step is required');
@ -18,15 +16,16 @@ class AuthScreen extends StatefulWidget {
final Function(HashMap<String, String>) onFinish; final Function(HashMap<String, String>) onFinish;
final List<AuthStep> steps; final List<AuthStep> steps;
final String submitBtnTitle; final String submitBtnTitle;
final List<AuthAction>? actions;
@override @override
State<AuthScreen> createState() => _AuthScreenState(); State<AuthScreen> createState() => _AuthScreenState();
} }
class _AuthScreenState extends State<AuthScreen> { class _AuthScreenState extends State<AuthScreen> {
int _index = 0;
final _formKey = GlobalKey<FormState>(); final _formKey = GlobalKey<FormState>();
final _pageController = PageController();
final _animationDuration = const Duration(milliseconds: 300);
final _animationCurve = Curves.ease;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -37,7 +36,12 @@ class _AuthScreenState extends State<AuthScreen> {
), ),
body: Form( body: Form(
key: _formKey, key: _formKey,
child: Column( child: PageView(
physics: const NeverScrollableScrollPhysics(),
controller: _pageController,
children: <Widget>[
for (AuthStep step in widget.steps)
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
const Spacer(), const Spacer(),
@ -48,9 +52,7 @@ class _AuthScreenState extends State<AuthScreen> {
), ),
child: Column( child: Column(
children: [ children: [
Column( for (AuthField field in step.fields)
children: [
for (AuthField field in widget.steps[_index].fields)
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -70,28 +72,42 @@ class _AuthScreenState extends State<AuthScreen> {
], ],
) )
], ],
)
],
), ),
), ),
const Spacer(), const Spacer(),
Padding( Padding(
padding: const EdgeInsets.all(30.0), padding: const EdgeInsets.all(30.0),
child: Column( child: Row(
mainAxisAlignment: widget.steps.first != step
? MainAxisAlignment.spaceBetween
: MainAxisAlignment.end,
children: [ children: [
if (widget.steps.first != step)
ElevatedButton( ElevatedButton(
style: ElevatedButton.styleFrom( onPressed: () => _pageController.previousPage(
minimumSize: const Size.fromHeight(50), duration: _animationDuration,
curve: _animationCurve,
), ),
child: Row(
children: [
const Icon(
Icons.arrow_back,
size: 18,
),
const Padding(
padding: EdgeInsets.only(left: 4.0),
child: Text('Vorige stap'),
),
],
),
),
ElevatedButton(
onPressed: () { onPressed: () {
if (!_formKey.currentState!.validate()) { if (!_formKey.currentState!.validate()) {
return; return;
} }
if (widget.steps.length > _index + 1) {
setState(() { if (widget.steps.last == step) {
_index++;
});
} else {
var values = HashMap<String, String>(); var values = HashMap<String, String>();
for (var step in widget.steps) { for (var step in widget.steps) {
@ -101,27 +117,38 @@ class _AuthScreenState extends State<AuthScreen> {
} }
widget.onFinish(values); widget.onFinish(values);
return;
} }
_pageController.nextPage(
duration: _animationDuration,
curve: _animationCurve,
);
}, },
child: Text( child: Row(
widget.steps.length > _index + 1 children: [
? 'Volgende stap' Text(
: widget.submitBtnTitle, widget.steps.last == step
? widget.submitBtnTitle
: 'Volgende stap',
),
const Padding(
padding: EdgeInsets.only(left: 4.0),
child: Icon(
Icons.arrow_forward,
size: 18,
), ),
), ),
for (AuthAction action in widget.actions ?? []) ],
TextButton(
style: ElevatedButton.styleFrom(
minimumSize: const Size.fromHeight(40),
), ),
onPressed: action.onPress,
child: Text(action.title),
), ),
], ],
), ),
) )
], ],
), ),
],
),
), ),
); );
} }

View file

@ -55,11 +55,11 @@ class RegistrationScreen extends StatelessWidget {
(email) => (email == null || email.isEmpty) (email) => (email == null || email.isEmpty)
? 'Geef uw e-mailadres op' ? 'Geef uw e-mailadres op'
: null, : null,
(email) => RegExp( (email) =>
r'^.+@[a-zA-Z]+\.{1}[a-zA-Z]+(\.{0,1}[a-zA-Z]+)$', RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
).hasMatch(email!) .hasMatch(email!)
? 'Geef een geldig e-mailadres op' ? null
: null, : 'Geef een geldig e-mailadres op',
], ],
) )
], ],