title: How to perform validation of TextField?
body: <p>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 <code>StartPage</code> into <code>StatefulWidget</code> or not. This class contains button which redirect to new page with <code>TextField</code>. 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 <code>TextField</code> into class that <code>extends State</code>.</p>
  <p>I found for example: <a href="https://flutter.dev/docs/cookbook/forms/validation" rel="nofollow noreferrer">https://flutter.dev/docs/cookbook/forms/validation</a> but for me it is weird that first, we create MyApp which is <code>Stateless</code> then we redirect to class which extends <code>StatefulWidget</code> and it does not make anything then redirect to next class which <code>extends State</code>.</p>
  <p>What is the best practice to make it? Thanks for any help.</p>
  <p><strong>StartPage</strong></p>
  <pre><code>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) =&gt; LoginPage()));
                  },
                  child: Text('Zaloguj się',
                      style: TextStyle(fontSize: 30, color: Color(0xffffffff)),
                      textAlign: TextAlign.center),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all&lt;Color&gt;(
                      Color(0xFF6FC76C),
                    ),
                    shape: MaterialStateProperty.all&lt;RoundedRectangleBorder&gt;(
                      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(&quot;blabla&quot;,
                    style: TextStyle(
                      fontSize: 20,
                      color: Color(0xffffffff),
                    ),
                    textAlign: TextAlign.center),
              ),
            ],
          ),
        ),
        backgroundColor: const Color(0xFE1A5BFF),
      );
    }
  }
  </code></pre>
  <p>and Loginpage</p>
  <pre><code>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 =
        &quot;....&quot;;
  
    final emailController = TextEditingController();
    bool emailValidate = false;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(&quot;Zaloguj się&quot;),
        ),
        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: () =&gt; moveToProperWindowBasedOnEmail(
                      emailController.text, context),
                  child: Text('blabla',
                      style: TextStyle(
                        fontSize: 30,
                        color: Color(0xffffffff),
                      ),
                      textAlign: TextAlign.center),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all&lt;Color&gt;(
                      Color(0xFF2F45C6),
                    ),
                    shape: MaterialStateProperty.all&lt;RoundedRectangleBorder&gt;(
                      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: &quot;Sign up with Google&quot;,
                onPressed: () {},
              ),
              SignInButton(
                Buttons.Facebook,
                text: &quot;Sign up with Facebook&quot;,
                onPressed: () {},
              )
            ],
          ),
        ),
        backgroundColor: const Color(0xFEF2F7FD),
      );
    }
  
    Future&lt;void&gt; moveToProperWindowBasedOnEmail(
        String text, BuildContext context) async {
      //validation
  
      if (validation == 'false') {
        ....
        }
      }
    }
  }
  </code></pre>