Membuat Aplikasi Form Login dan Validation Sederhana Pada Flutter

Pada tutorial kali ini kita akan membuat sebuah project untuk Form Login sederhana dan validation pada Flutter

Terlebih dahulu buatlah project flutter dengan simple_login_app

Kemudian buatlah sebuah page form seperti dibawah ini :

import 'package:flutter/material.dart';
import 'page_home.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageLogin(),
    );
  }
}

class PageLogin extends StatelessWidget {
  final myUsernameController = TextEditingController();
  final myPasswordController = TextEditingController();
  String nUsername, nPassword;

  //tambahkan form
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Login'),
        backgroundColor: Colors.orange,
      ),

      body: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextFormField(
              //cek data field nya kosong
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please Input Username';
                }
                return null;
              },

              controller: myUsernameController,
              decoration: InputDecoration(
                hintText: 'Input Username',
              ),
            ),
            TextFormField(
              //cek data field nya kosong
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please Input Username';
                }
                return null;
              },
              maxLength: 16,
              maxLengthEnforced: true,
              controller: myPasswordController,
              obscureText: true,
              decoration: InputDecoration(
                hintText: 'Input Password',
              ),
            ),
            SizedBox(
              height: 25.0,
            ),
            MaterialButton(
              minWidth: 85.0,
              height: 50.0,
              color: Colors.green,
              textColor: Colors.white,
              onPressed: () {

               
                
                    //aksi pindah
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => PageHome(
                            )));
                  
                
              },
              child: Text('Submit'),
            )
          ],
        ),
      ),

    );
  }
}

Ketika di running maka akan tampak seperti dibawah ini :

Tampilan Page login

Untuk mengatur limit karakter pada text field kita cukup menambahkan :

maxLength: 16,
maxLengthEnforced: true,

Setelah itu tambahkan code untuk page home, dimana page home ini akan muncul ketika tombol submit di klik, tapi sebelum pindah ke page home ada validasi terhadap inputan text field nya

pada file page_home.dart, code nya seperti ini

import 'package:flutter/material.dart';

class PageHome extends StatefulWidget {

  final String nama;
  final String password;

  //constructor


  PageHome({Key key, @required this.nama, @required this.password}) : super(key:  key);

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

class _PageHomeState extends State<PageHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Home'),
        backgroundColor: Colors.red,
      ),

      body: ListView(
        children: <Widget>[
          Text('Welcome : ${widget.nama}'),
          Text('Your Password is : ' + widget.password)
        ],
      ),
    );
  }
}

Pada code diatas, kita dapat melihat bahwa untuk menampung nilai dari page main, yang dibutuhkan adalah pada bagian ini :

final String nama;
final String password;

  //constructor
PageHome({Key key, @required this.nama, @required this.password}) : super(key:  key);

kemudian untuk menampilkannya seperti di bawah ini:

Text('Welcome : ${widget.nama}'),
Text('Your Password is : ' + widget.password)

Tampilan halaman home

Page Home

Proses Validasi

untuk proses validasi sendiri, kita tambahkan di bagian button submit di page main.dart

validasinya antara lain :

textfield tidak boleh kosong

username nya harus sama dengan ‘rizki’

passwordnya harus lebih dari 5 karakter

untuk code validasi seperti dibawah ini :

MaterialButton(
  minWidth: 85.0,
  height: 50.0,
  color: Colors.green,
  textColor: Colors.white,
  onPressed: () {

    //cek apakah username = rizki
    //cek password < 5 : gak bisa login, >5 bisa login

    //ngambil value dari widget textfield
    nUsername = myUsernameController.text;
    nPassword = myPasswordController.text;

    if (_formKey.currentState.validate()) {

      if(nUsername != 'rizki'){
        print("username salah");
      }else if(nPassword.length <= 5){
        print("password harus lebih dari 5 ");
      }else{
        //aksi pindah
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => PageHome(
                  nama: nUsername,
                  password:
                  nPassword, // variable yang di pass ke page home
                )));
      }
    }
  },
  child: Text('Submit'),
)

Untuk full code pada page main.dart tampak seperti dibawah ini :

import 'package:flutter/material.dart';
import 'page_home.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageLogin(),
    );
  }
}

class PageLogin extends StatelessWidget {
  final myUsernameController = TextEditingController();
  final myPasswordController = TextEditingController();
  String nUsername, nPassword;

  //tambahkan form
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Login'),
        backgroundColor: Colors.orange,
      ),

      body: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextFormField(
              //cek data field nya kosong
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please Input Username';
                }
                return null;
              },

              controller: myUsernameController,
              decoration: InputDecoration(
                hintText: 'Input Username',
              ),
            ),
            TextFormField(
              //cek data field nya kosong
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please Input Username';
                }
                return null;
              },
              maxLength: 16,
              maxLengthEnforced: true,
              controller: myPasswordController,
              obscureText: true,
              decoration: InputDecoration(
                hintText: 'Input Password',
              ),
            ),
            SizedBox(
              height: 25.0,
            ),
            MaterialButton(
              minWidth: 85.0,
              height: 50.0,
              color: Colors.green,
              textColor: Colors.white,
              onPressed: () {

                //cek apakah username = rizki
                //cek password < 5 : gak bisa login, >5 bisa login

                //ngambil value dari widget textfield
                nUsername = myUsernameController.text;
                nPassword = myPasswordController.text;

                if (_formKey.currentState.validate()) {

                  if(nUsername != 'rizki'){
                    print("username salah");
                  }else if(nPassword.length <= 5){
                    print("password harus lebih dari 5 ");
                  }else{
                    //aksi pindah
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => PageHome(
                              nama: nUsername,
                              password:
                              nPassword, // variable yang di pass ke page home
                            )));
                  }
                }
              },
              child: Text('Submit'),
            )
          ],
        ),
      ),

    );
  }
}

Tampilan aplikasi ketika running :