Flutter | Log in form sederhana

Yoo, lama tidak menulis dan mohon maaf kalau saya tidak membalas pertanyaan soalnya sok sok sibuk aja hehe 😊. Ok sekarang kita mencoba buat project dengan menggunakan flutter, project ini kita buat untuk belajar belajar ringan saja ya, nanti dikembangkan lagi 😊. Ok mula mula kita akan membuat login form sederhana terlebih dahulu, oke langsung saja. Pastikan anda telah menginstall plugin flutter berikut dengan SDKnya, pluginnya bisa di download langsung pada android studio dengan cara :

File -> Settings -> Plugins dan Pilih Martkeplace kemudian car saja flutter, saat mendownload flutter akan diberikan untuk mendownload Dart juga karena flutter menggunakan Bahasa pemrograman dart

Untuk detail instalasinya dapat ikuti dari link beriku ya : https://flutter.dev/docs/get-started/install/windows

Lanjut, klik File -> New Flutter project dan pilih Flutter application kemudian klik Ok

Saya memberi nama project dengan nama belajar, kalian bebas memberi nama apapun 😊 dan jika sudah klik Next -> Finish.

Setelah selesai membuat project akan diarahkan ke main.dart yang sudah berisi base kodingan, dan jika ingin menjalankannya tinggal run saja menggunakan emulator ataupun real device, dan akan tampil seperti ini :

Sambal kita mencoba menjalankan aplikasinya, kita bisa membuka terminal yang disediakan oleh android studio, dan ketikkan perintah flutter run -v, command ini tidak mempercepat running aplikasi ya, hanya saja kadang kadang proses saat menjalankan aplikasi bisa mengalami berbagai macam kendala, dengan menjalankan kode berikut kita bisa melakukan trace saat mana aplikasi gagal dijalankan 😊

Dan jika aplikasi berjalan sempurna akan tampil halaman seperti ini :

Tombol floating action button tersebut dapat kalian klik, dan text angka 0 ditengah akan bertambah seiring dengan anda mengklik floating action button tersebut.

Kembali ke dalam kodingan, disana kita dapat memperhatikan 2 hal menonjol, pertama pada class MyApp yang melakukan extensi ke StatelessWidget dan MyHomePage meng-ekstensi ke StatefulWidget.

Apa apaan extensi ini, baru juga buat aplikasi sudah main extend, pasti susah nantinya :v. haha santai tenang,

Aplikasi atau layout yang berjalan pada flutter ini atau semua komponen yang tampil pada layer tersebut adalah widget, StatelessWidget ini ini merupakan widget yang statis atau tidak berubah ubah alias tetap, nah apanya yang tidak berubah???, yang tidak berubah adalah bentuk dan isinya bisa dibilang seperti itu, contohnya adalah form input, button dan masih banyak lagi, sedangkan StatefulWidget adalah kebalikan dari StatelessWidget karena ia berubah ubah, contoh gampang dari StatefullWidget itu adalah Text angka 0 yang berubah saat kita menekan tombol floating action button tersebut. 2 hal itu yang perlu kita ingat saat awal pembuatan project menggunakan Flutter.

Tahap berikutnya kita akan membuat form login sederhana aja, kalau kalian ingin membuat desain yang bagus kalian bisa mencari widget yang keren keren dari material design 😊

Oke, kita hapus saja semua kode yang ada pada halaman main.dart dan kita tulis ulang sekalian belajar membiasakan diri dengan Bahasa dart 😊.

Pertama lakukan import material.dar dengan cara :

import ‘package:flutter/material.dart’;

material dart ini merupakan komponen widget yang kita gunakan, atau dasar dari flutter sendiri, karena base flutter adalah widget hehe maaf sering saya ulangi ya

setelah itu kita definisikan method void yang merupakan base agar aplikasi kita dapat berjalan dengan cara seperti berikut :

void main(){
  runApp(MaterialApp(
    home: LoginForm(),
  ));

bro itu LoginForm kok merah merah?, iya merah karena kita belum buat classnya, langsung saja kita buat classnya dengan meng-extend StatelessWidget

class LoginForm extends StatelessWidget {
}

merah lagi bro di class LoginFormnya!!. Wah tenang kita lakukan override didalam class LoginForm dengan cara menekan alt+enter dan pilih override

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

jika sudah kita hapus //TODO dan thrownya dan kita ganti dengan kode berikut :

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      ),
    );
  }
}

jadi return yang ada pada class LoginForm ini akan mereturn MaterialApp atau layout Statelessnya ke method void main untuk dijalankan, seperti itu.

Flutter ini jika digambarkan mungkin bergerak atau tersusun mirip seperi CSS, jadi nanti akan ada yang Namanya container dan lain lain, tapi itu nanti.

Didalam return MaterialApp terdapat Scaffold yang memegang widget widget turunannya saat dijalankan, didalam home ini kita juga bisa membuat titleBar (itu lo header yang ada pada aplikasi), dan kita tambahkan juga property body yang gunanya untuk membungkus bagian body, seperti kode berikut :

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Ini title app bar'
          ),
        ),
          body: Center(
            child: Text('ini bagian body'),
          ),
      ),
    );
  }
}

kalau sudah jalankan Kembali dan hasilnya seperti berikut :

Oiya satu lagi, yang harus diperhatikan dalam penulisan, kita harus definisikan property terlebih dahulu baru kita tulis nama Widgetnya, jadi misal kita ingin tulisan ‘Hello world!’ maka kita tuliskan property terlebih dahulu

child: Text(‘Hello world’)

property merupakan kode yang awalannya huruf kecil dan widget dengan awalan huruf kapital seperti sintax Text(‘’);

oke kita ganti kode Center diatas menggunakan Column, layouting pada flutter ini mirip seperti web, menggunakan Column dan Row, khususnya pada column dan row childnya akan menggunakan kode :

body: Column(
  children: [
  ],

loh kok bukan child?. Iya karena kita bisa memasukkan banyak child kedalam column maupun row, contohnya kita akan memasukkan beberapa input form untuk membuat form login kedalam widget column ini, dapat contoh dari kodingan berikut

body: Column(
  children: [
    TextFormField(
      decoration: InputDecoration(
        labelText: 'Username',
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(30)),
        suffixIcon: Icon(
          Icons.error,
        ),
      ),
    ),
    TextFormField(
      decoration: InputDecoration(
        labelText: 'Password',
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(30)),
        suffixIcon: Icon(
          Icons.error,
        ),
      ),
    ),
  ],
),

saya juga menambahkan property borderRadius untuk membuat efek membulat pada sisi sisinya seperti gambar berikut :

Sepertinya Appbarnya mengganggu dan tidak terlihat clean, kita hapus saja biar tidak ada Appbar, karena saya lebih prefer tidak menggunakannya untuk form login, caranya tinggal kita hapus saja kode AppBarnya hehe 😊. Dan hasilnya seperti berikut :

Waduh kok jelek ya, heme heme, nah kita bisa kasi padding ni pada bagian atas-bawah-kiri-dan kanannya untuk merapikan, nah mirip ni dengan css pada pemrograman tampilan web, kita bungkus Widget TextFormFieldnya dengan Widget bernama Padding seperti kode berikut :

Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextFormField(
    decoration: InputDecoration(
      labelText: 'Username',
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(30)),
      suffixIcon: Icon(
        Icons.error,
      ),
    ),
  ),
),

Kode padding sendiri kita bisa gunakan const :

EgdeInsets.all(8.0)

yang digunakan untuk memberikan ukuran padding yang sama pada semua sisi, dan jika kita ingin memberikan padding ke satu sisi lebih banyak besar dari yang lain kita bisa menggunakan :

EgdeInsets.only(left:10, right:10, top: 40, bottom 10)

jadi pada bagian top paddingnya adalah 40 dan lainnya adalah 10

selain cara tersebut kita juga bisa menggunakan cara lain yang bernama : Sizedbox, widget ini merupakan widget untuk membuat kotak, namun kita bisa curangi dengan meyelipkan widget ini karena basicnya berwarna transparent, contoh saja pada kode berikut :

SizedBox(height: 200),
Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextFormField(
    decoration: InputDecoration(
      labelText: 'Username',
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(30)),
      suffixIcon: Icon(
        Icons.error,
      ),
    ),
  ),
),

dan hasilnya akan menjadi seperti ini :

Dapat dilihat walaupun saya menggunakan padding untuk semua sisi dengan nilai 8, tetapi pada bagian atasnya memiliki padding sebesar 200 karena diatas Text Input Field tersebut diisi oleh SizedBox dengan ukuran 200.

Selanjutnya kita buat tombol untuk mendaftar dan login, dan kita akan coba buat dengan menggunakan Row(baris), untuk button daftar kita akan gunakan yang Namanya TextButton jadi tidak ada garis pinggir dari button tersebut, dan untuk button login akan kita gunakan FlatButton yang kita modifikasi

Bisa mengikuti kode program berikut untuk menambahkan row dan buttonnya :

Row(
  children: <Widget>[
    TextButton(
      onPressed: () {
        // Respond to button press
      },
      child: Text("TEXT BUTTON"),
    ),
    child: FlatButton(
        height: 55,
        textColor: Colors.white,
        color: Colors.red[900],
        shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30),
     ),
        onPressed: () {
        // nanti kita arahkan kehalaman login
        },
        child: Text(
                 "Sign In",
                 style: TextStyle(
                 letterSpacing: 2,
                 color: Colors.white,
                 fontSize: 20),
        ),
     ),
  ],
)

Minta perhatiannya untuk Widget Row ini kita letakkan setelah wrap padding terakhir atau tepat sebelum tutup dari Widget Column, karena Widget Column yang memegang peran pembuatan layout(body). Dan hasilnya seperti berikut :

Kemudian dengan sedikit pengambilan kode kode yang ada digoogle hasilnya seperti berikut :

Wkwkwkwkw, yuk kita bagi menjadi, potongan dan kita bahas dibawah.

Setelah saya menambahkan row dan button, saya menambahkan Text Welcom dan Quote dibawahnya dengan menggunakan kode berikut :

SizedBox(
    height: MediaQuery.of(context).size.height * 0.2),
Text('Welcome', 
  style: TextStyle(
      color: Colors.red[900], 
      fontSize: 32, 
      letterSpacing: 4.0, 
      fontWeight: FontWeight.bold),),
SizedBox(height: 10),
Text('Login to explore Amazing Things', 
  style: TextStyle(
      color: Colors.red[300], 
      fontSize: 18, 
      letterSpacing: 1.0),),

Kemudian untuk bagian formnya kalian bisa ikuti kode berikut :

Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextFormField(
    cursorColor: Colors.red,
    decoration: InputDecoration(
      enabledBorder: OutlineInputBorder(
        borderSide: const BorderSide(color: Colors.red, width: 2.0),
        borderRadius: BorderRadius.circular(50.0),
      ),
      contentPadding:
      EdgeInsets.only(left: 30.0, top: 20.0, bottom: 20.0),
      focusedBorder: OutlineInputBorder(
        borderSide:
        const BorderSide(color: Colors.red, width: 2.0),
        borderRadius: BorderRadius.circular(50.0),
      ),
      suffixIcon: Icon(
        Icons.person,
        color: Colors.red,
      ),
      labelText: ('Username'),
      labelStyle:TextStyle(
          color: Colors.red
      ),
    ),
  ),
),
Padding(
  padding: const EdgeInsets.all(8.0),
  child: TextFormField(
    cursorColor: Colors.red,
    decoration: InputDecoration(
      enabledBorder: OutlineInputBorder(
        borderSide: const BorderSide(color: Colors.red, width: 2.0),
        borderRadius: BorderRadius.circular(50.0),
      ),
      contentPadding:
          EdgeInsets.only(left: 30.0, top: 20.0, bottom: 20.0),
      focusedBorder: OutlineInputBorder(
        borderSide:
            const BorderSide(color: Colors.red, width: 2.0),
        borderRadius: BorderRadius.circular(50.0),
      ),
      suffixIcon: Icon(
        Icons.lock,
        color: Colors.red,
      ),
      labelText: ('Password'),
      labelStyle:TextStyle(
          color: Colors.red
      ),
    ),
  ),
),

Dan pada button yang tadinya row berisi button kita tambahkan button yang diwrap oleh padding dan wrap lagi dengan widget expanded, widget expanded ini gunanya untuk meng-expansi , jadi row ini kan berupa baris, kita buat button ini di tengah dengan mengatur rata tengah dengan menggunakan kode :

mainAxisAlignment : 
MainAxisAligment.spaceEvenly, jadi 1 baris ini diisi dengan ukuran yang sama antara 2 button, kemudian untuk memenuhinya Kembali di wrap dengan widget Expanded, seperti kode dibawah :
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Expanded(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextButton(
          onPressed: () {
            // nanti kita arahkan ke halaman daftar
          },
          child: Text(
            "Sign Up",
            style: TextStyle(
                letterSpacing: 2.0,
                color: Colors.red[900],
                fontSize: 20),
          ),
        ),
      ),
    ),
    Expanded(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
          child: FlatButton(
            height: 55,
            textColor: Colors.white,
            color: Colors.red[900],
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30),
            ),
            onPressed: () {
              // nanti kita arahkan kehalaman login
            },
            child: Text(
              "Sign In",
              style: TextStyle(
                  letterSpacing: 2,
                  color: Colors.white,
                  fontSize: 20),
            ),
          ),
        ),
    ),
  ],
)

Oke jika sudah selesai dengan membuat view, kita tambahkan variabel untuk mengambil nilai yang dimasukkan ke form, dan satu variabel lagi untuk digunakan sebagai pemberitahuan, jika di native android kita menggunakan Toast untuk menampilkan dialog message singkat, di flutter kita menggunakan snackbar, namun jika ingin menggunakan Toast dapat mencarinya di pub.dev sebagai dependencies tambahan.

Kode programnya seperti berikut :

TextEditingController getUser = new TextEditingController();
TextEditingController getPass = new TextEditingController();
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

Tambahkan sesuai pada gambar dibawah :

Kemudian tambahkan properties bernama controller pada tiap fieldnya seperti berikut :

Oke kalau sudah buat 2 file dart lagi dengan cara klik kanan pada folder lib kemudian pilih new -> Dart File seperti gambar dibawah dan buat file satu home dan satu halaman daftar

Jika sudah import file home ini ke dalam main.dart dengan cara seperti berikut :

Jika sudah kita arahkan pada function onPressed(){} yang kita kosongkan sebelumnya, untuk button Sign Up kita tambahkan kode berikut :

onPressed: () {
  // nanti kita arahkan ke halaman daftar
  Navigator.push(context, MaterialPageRoute(builder: (context) => SignUp()));
},

dan untuk button Login kita akan membuat logic dan memanggil snackbar untuk memberikan mini pop up dialog, oh ya sebelumnya kita tambahkan key untuk snackbar terlebih dahulu di Scaffold karena terjadi error karena penggunaan context

Oke jika sudah silahkan copy kode berikut :

onPressed: () {
  // nanti kita arahkan kehalaman login
  //default user
  String user = 'belajar';
  String pass = '1234';
  if  (getUser.text.length == 0) {
    final errorUser = SnackBar(content: Text('Username tidak boleh kosong!'),duration: Duration(seconds: 2),);
    _scaffoldKey.currentState.showSnackBar(errorUser);
  } else if (getPass.text.length == 0) {
    final errorUser = SnackBar(content: Text('Password tidak boleh kosong!'),duration: Duration(seconds: 2),);
    _scaffoldKey.currentState.showSnackBar(errorUser);
  } else if (getUser.text == user && getPass.text == pass) {
    final errorUser = SnackBar(content: Text('Selamat datang user: ' + getUser.text),duration: Duration(seconds: 2),);
    _scaffoldKey.currentState.showSnackBar(errorUser);
    //delay to Home page
    Timer(Duration(seconds: 2), (){
      Navigator.push(context, MaterialPageRoute(builder: (context) => Home()));
    });
  } else {
    final errorUser = SnackBar(content: Text('Cek kembali input anda!'),duration: Duration(seconds: 2),);
    _scaffoldKey.currentState.showSnackBar(errorUser);
  }
},

dan hasilnya seperti berikut :

Saat kita berhasil login maka snackbar juga muncul untuk memberi tahu kita berhasil login dan ada delay waktu sebelum kita beralih kehalaman home karena pada logic login kita menambahkan yang Namanya Timer dengan start waktu 2 detik, jadi dalam 2 detik baru kita akan dipindahkan ke halaman Home mengunakan Navigator.push

Sekian untuk login sederhana menggunakan flutter, mohon maaf jika berbelit belit dan kurang jelas. Terima kasih 😊