Workshop: Flutter Auth Login #part3 LoginPage FormBuilder

Create folder ‘assets’ in Flutter Project and copy profile images

add ‘assets’ path in pubspec.yaml

  assets:
    - assets/

LoginPage.dart

show ‘profile.png’ and set height = 100

Image(
     image: AssetImage('assets/profile.png'),
     height: 100,
),

show text ‘Login’ and set font size = 20 , color = blue

 Text('Login',
       style: TextStyle(
                fontSize: 20, 
                color: Colors.blue
       )
 ),          

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Image(
                  image: AssetImage('assets/profile.png'),
                  height: 100,
                ),
                Text('Login',
                    style: TextStyle(fontSize: 20, color: Colors.blue)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

install FormBuilder

https://pub.dev/packages/flutter_form_builder

Run this command:

With Flutter:

 $ flutter pub add flutter_form_builder

This will add a line like this to your package’s pubspec.yaml (and run an implicit dart pub get):

dependencies:
  flutter_form_builder: ^6.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more

Import it

Now in your Dart code, you can use:

import 'package:flutter_form_builder/flutter_form_builder.dart';

FormBuider()

add _formKey

final _formKey = GlobalKey<FormBuilderState>();

key: _formKey,

add initialValue

initialValue: {'username': '', 'password': ''},

FormBuilderTextField()

for input username and password

FormBuilderTextField(
          name: 'username',
          decoration: InputDecoration(
            labelText: 'Email',
            filled: true,
   ),
   validator: FormBuilderValidators.compose([
     FormBuilderValidators.required(context,
          errorText: 'please insert email'),
     FormBuilderValidators.email(context),
 ]),
 keyboardType: TextInputType.emailAddress,
 ),

MaterialButton()

for open Homepage (pass launcher) and RegisterPage

SizedBox(
     child: MaterialButton(
     onPressed: () {
     _formKey.currentState!.save();
     if (_formKey.currentState!.validate()) { 
     // open Homepage (pass launcher)
        Navigator.pushNamed(context, '/launcher');
     } else {
     print("validation failed");
     }
     },
     child: Text("Login",
     style: TextStyle(color: Colors.blue)),
     ),
),

LoginPage.dart

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

class LoginPage extends StatefulWidget {
  LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormBuilderState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Image(
                  image: AssetImage('assets/profile.png'),
                  height: 100,
                ),
                Text('Login',
                    style: TextStyle(fontSize: 20, color: Colors.blue)),
                Padding(
                  padding: EdgeInsets.all(10),
                  child: FormBuilder(
                    key: _formKey,
                    initialValue: {'username': '', 'password': ''},
                    child: Column(
                      children: [
                        FormBuilderTextField(
                          name: 'username',
                          decoration: InputDecoration(
                            labelText: 'Email',
                            filled: true,
                          ),
                          validator: FormBuilderValidators.compose([
                            FormBuilderValidators.required(context,
                                errorText: 'please insert email'),
                            FormBuilderValidators.email(context),
                          ]),
                          keyboardType: TextInputType.emailAddress,
                        ),
                        SizedBox(height: 15),
                        FormBuilderTextField(
                          name: 'password',
                          obscureText: true,
                          decoration: InputDecoration(
                            labelText: 'password',
                            filled: true,
                          ),
                          validator: FormBuilderValidators.compose([
                            FormBuilderValidators.required(context,
                                errorText: 'please insert password'),
                            FormBuilderValidators.minLength(context, 8,
                                errorText: 'min length 8 character'),
                          ]),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        SizedBox(
                          child: MaterialButton(
                            onPressed: () {
                              _formKey.currentState!.save();
                              if (_formKey.currentState!.validate()) {
                                // open Homepage (pass launcher)
                                Navigator.pushNamed(context, '/launcher');
                              } else {
                                print("validation failed");
                              }
                            },
                            child: Text("Login",
                                style: TextStyle(color: Colors.blue)),
                          ),
                        ),
                        SizedBox(height: 15),
                        Row(
                          children: [
                            Expanded(
                                child: MaterialButton(
                              onPressed: () {
                                // open Homepage
                                Navigator.pushNamed(context, '/register');
                              },
                              child: Text('Register User',
                                  style: TextStyle(color: Colors.blue)),
                            ))
                          ],
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}