Im new in flutter and I would like to perform some sort of validation of TextField. I would like to check if it is empty and if it is not whether the mail is in correct form. I'm struggling with that, I'm not sure if I should change my main class which is StartPage
into StatefulWidget
or not. This class contains button which redirect to new page with TextField
. In this field we input e-mail and after clicking button some http reqest are made (after validation of course). I read that I need to change this class with TextField
into class that extends State
.
I found for example: https://flutter.dev/docs/cookbook/forms/validation but for me it is weird that first, we create MyApp which is Stateless
then we redirect to class which extends StatefulWidget
and it does not make anything then redirect to next class which extends State
.
What is the best practice to make it? Thanks for any help.
StartPage
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:.../ui/pages/LoginPage.dart';
class StartPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(60.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlutterLogo(size: 150),
SizedBox(
height: 50.0,
),
Text(
'blabla',
style: TextStyle(fontSize: 60, color: Color(0xffffffff)),
textAlign: TextAlign.center,
),
SizedBox(
height: 30.0,
),
Text(
'Wypożyczaj to, czego potrzebujesz',
style: TextStyle(fontSize: 23, color: Color(0xffffffff)),
textAlign: TextAlign.center,
),
SizedBox(
height: 70.0,
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 240, height: 60),
child: ElevatedButton(
onPressed: () {
Navigator.push(context,
new MaterialPageRoute(builder: (context) => LoginPage()));
},
child: Text('Zaloguj się',
style: TextStyle(fontSize: 30, color: Color(0xffffffff)),
textAlign: TextAlign.center),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF6FC76C),
),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
),
SizedBox(
height: 30.0,
),
OutlinedButton(
onPressed: null,
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(color: Colors.white),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
child: const Text("blabla",
style: TextStyle(
fontSize: 20,
color: Color(0xffffffff),
),
textAlign: TextAlign.center),
),
],
),
),
backgroundColor: const Color(0xFE1A5BFF),
);
}
}
and Loginpage
import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_signin_button/flutter_signin_button.dart';
import 'package:http/http.dart' as http;
class LoginPage extends StatelessWidget {
final String baseURL =
"....";
final emailController = TextEditingController();
bool emailValidate = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Zaloguj się"),
),
body: Container(
padding: EdgeInsets.all(40.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlutterLogo(size: 130),
SizedBox(
height: 30.0,
),
Text(
'Zaloguj lub zarejestruj się za pomocą adresu e-mail',
style: TextStyle(
fontSize: 18,
color: Color(0xff000000),
),
textAlign: TextAlign.center,
),
SizedBox(
height: 30.0,
),
TextField(
controller: emailController,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Adres e-mail',
fillColor: Color(0xffdbdbdb),
filled: true,
errorText:
emailValidate ? 'Please enter a Username' : null)),
SizedBox(
height: 15.0,
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 240, height: 60),
child: ElevatedButton(
onPressed: () => moveToProperWindowBasedOnEmail(
emailController.text, context),
child: Text('blabla',
style: TextStyle(
fontSize: 30,
color: Color(0xffffffff),
),
textAlign: TextAlign.center),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF2F45C6),
),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
),
SizedBox(
height: 35.0,
),
Text(
'Możesz też się zalogować za pomocą:',
style: TextStyle(
fontSize: 18,
color: Color(0xff000000),
),
textAlign: TextAlign.center,
),
SizedBox(
height: 15.0,
),
SignInButton(
Buttons.Google,
text: "Sign up with Google",
onPressed: () {},
),
SignInButton(
Buttons.Facebook,
text: "Sign up with Facebook",
onPressed: () {},
)
],
),
),
backgroundColor: const Color(0xFEF2F7FD),
);
}
Future<void> moveToProperWindowBasedOnEmail(
String text, BuildContext context) async {
//validation
if (validation == 'false') {
....
}
}
}
}