Flutter - Validating User Input - flutter

Question

So I'm trying to create a sign up page for my app in flutter. So far, I've got some welcome text and an input form where users can input their email. I've also got a button which will eventually change the page underneath the input field that says 'next'. The idea is to have the button disabled which was simple enough to do (just added OnPressed: null) however when the user enters at least one character, followed by an '#' and then a string list of '.com,.co.uk e.t.c) the next button will become enabled. I have tried to add a validate if else statement to the form but to no joy so have removed it from the code below. I guess what I'm asking is how do I:
Validate the input meets my requirements
Disable the button if it does not
Enable the button if it does
All responses / contributions to any of the above are greatly appreciated!
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(MyApp());
}
class MyCustomForm extends StatefulWidget {
#override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'Enter your email'),
),
]),
);
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test Bench',
home: Stack(
children: [
Scaffold(
body: Container(
width: double.infinity,
decoration: BoxDecoration(color: Colors.pinkAccent),
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
children: [
Text(
"Hello, Let's Get Started...\n",
style: TextStyle(
fontSize: 60.0,
fontWeight: FontWeight.bold,
fontFamily: 'Oswald',
color: Colors.black,
),
),
MyCustomForm(),
ButtonTheme(
minWidth: 250.0,
child: RaisedButton(
onPressed: null,
child: Text("Next"),
),
),
],
),
),
),
),
],
),
);
}
}

Answer 1

Here is a possible solution. I used regex to validate the email entered.
You can learn more about validation from here:
https://flutter.dev/docs/cookbook/forms/validation
class MyApp extends StatefulWidget {
// This widget is the root of your application.
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final _formKey = GlobalKey<FormState>();
bool isValidated = false;
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test Bench',
home: Stack(children: [
Scaffold(
body: Container(
width: double.infinity,
decoration: BoxDecoration(color: Colors.pinkAccent),
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(children: [
Text("Hello, Let's Get Started...\n",
style: TextStyle(
fontSize: 60.0,
fontWeight: FontWeight.bold,
fontFamily: 'Oswald',
color: Colors.black,
)),
Form(
key: _formKey,
child: Column(children: <Widget>[
TextFormField(
onChanged: (input) {
_formKey.currentState.validate();
},
validator: (input) {
var regex = RegExp(
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+#[a-zA-Z0-9]+\.[a-zA-Z]+");
if (!regex.hasMatch(input) && isValidated) {
setState(() {
isValidated = false;
});
return null;
} else {
setState(() {
isValidated = true;
});
return input;
}
},
decoration: InputDecoration(
labelText: 'Enter your email'),
),
])),
ButtonTheme(
minWidth: 250.0,
child: RaisedButton(
onPressed:
isValidated ? () => print('Signed In') : null,
child: Text("Next"),
),
),
]))))
]));
}
}