Flutter Login App With Navigation

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Contacts App',
        home: Scaffold(
          appBar: AppBar(
            title: Text("Login"),
          ),
          body: LoginForm()
        )
    );
  }
}

// Create a Login Form Widget
class LoginForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _LoginFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class _LoginFormState extends State<LoginForm> {

  // Todo: We are missing something in our code, something very very important

  String validatePassword(String value) {
    if (value.isEmpty || value.length < 6) {
      return "Your password should contain a minimum of 6 characters";
    }

    return null;
  }

  // Create a global key of type FormState that uniquely identifies
  // the Form widget and allows validation of the form.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    final Form form = Form(
      key: _formKey,
      child: Container(
        padding: EdgeInsets.all(40.0),
        child: ListView(
          children: <Widget>[
            /* Center(
              child: Container(
                margin: EdgeInsets.symmetric(vertical: 20),
                child: Image(
                    image: AssetImage("assets/flutter_logo.png"),
                    fit: BoxFit.contain, height: 80.0),
              )
            ), */
            Text("Please provide your login credentials below"),
            TextFormField(
              keyboardType: TextInputType.emailAddress, // this helps us to control the keyboard type
              decoration: InputDecoration(
                  hintText: "Email"
              ),
              validator: (value) {
                if (value.isEmpty) {
                  return "Your email is required";
                }

                return null;
              },
            ),
            TextFormField(
              obscureText: true, // this makes the text not visible
              decoration: InputDecoration(
                  hintText: "Password"
              ),
              validator: validatePassword,
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 20.0), // top margin
              child: RaisedButton(
                child: Text("Login", style: TextStyle(
                    fontSize: 20
                ),),
                onPressed: () {
                  // Validate returns true if the form is valid, or false
                  // otherwise.
                  if (_formKey.currentState.validate()) {
                    // If the form is valid, display a Snackbar.
                    // Scaffold.of(context).showSnackBar(SnackBar(content: Text("Logging in")));

                    // Navigate to a new page
                    Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) {
                          return MainPage();
                        })
                    );
                  }
                },
              ),
            )
          ],
        ),
      )
    );

    return form;
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Main Page"),
      ),
      body: Center(
        child: Text('Welcome', style: TextStyle(fontSize: 30.0),)
      ),
    );
  }
}