Membuat Field Input TextField() di Flutter

Selamat sore, pada tulisan ini kita akan mempelajari tentang widget TextFormField(). Nah widget ini biasanya digunakan untuk tempat input berupa login atau input data-data tertentu. Contoh penggunaan widget ini seperti saat kita akan mendaftar atau login di aplikasi Facebook / Instagram.

Kita pasti menginputkan email dan password bukan ? Nah seperti itulah contohnya...

Langsung saja kita buka project kemarin ( bagi yang belum punya bisa cek disini ), di bagian body() yang awalnya seperti ini scriptnya :

        body: Center(

          child: Text(

            "Contoh Text",

            style: TextStyle(

              color: Colors.blue,

              fontWeight: FontWeight.bold

            ),

          ),

        )

Akan kita hapus beberapa bagian sehingga menjadi :

        body: Center(

          child:

         

        )

Nah, dari sini kita akan menambahkan widget :

• Column()

Widget ini kita gunakan untuk mengatur supaya widget-widget kita akan berapa pada posisi lurus vertikal ( atas ke bawah ).

Widget ini bisa menampung banyak widget sekaligus.

• TextFormField()

Untuk widget ini, kita gunakan sebagai tempat input. Sebagai contoh kita akan membuat tampilan login, sehingga kita membutuhkan 2 widget ini untuk input email dan password.

• Button()

Widget ini kita gunakan sebagai tombol waktu melakukan login ( mirip seperti tombol di Facebook atau Instagram )

Tidak ada kesuksesan bagi seorang murid kecuali di belakangnya terdapat do'a-do'a tulus dari seorang guru dan kedua orang tuanya

Langsung saja cuzz kita laksanakan menuliskan scriptnya, pertama kita tambahkan widget Column() sebagai anak atau child dari widget Center(). Menjadi seperti dibawah ini :

        body: Center(

          child: Column(

            children: [

            ],

          )

        )

Mudah bukan? Selanjutnya kita tambahkan 2 buah widget TextFormField() di tengah-tengah children : [] 

Sehingga menjadi seperti di bawah ini :

        body: Center(

          child: Column(

            children: [

              TextFormField(),

              TextFormField()

            ],

          )

        )

Sekarang kita coba jalankan aplikasi kita menggunakan perintah flutter run maka akan kita dapatkan tampilan :

Sudah terlihat terdapat 2 buah TextFormField(), satu yang kurang. Apa ya? 😐

Yap benar, tombol sebagai tempat kita 'klik' 😄

Tenang, mudah kok! Tinggal kita tambahkan sebuah widget button dibawah TextFormField() yang kedua sehingga menjadi :

        body: Center(

          child: Column(

            children: [

              TextFormField(),

              TextFormField(),

              ElevatedButton(

                onPressed: () {

                 

                },

                child: Text("Login")

              )

            ],

          )

        )

Kita jalankan lagi source code kita ( atau bisa dengan Hot Restart ) maka tampilan akan berubah menjadi :

Nah, mudah dan menyenangkan bukan ? 😁

Buat wait! Kok tampilannya masih begitu 😕 

Ya karena kita memang masih membuat dengan sederhana, untuk selanjutnya kita akan bahas bagaimana mendesain sebuah TextFormField() supaya lebih menarik...

See you... 😁😇😊
#WajibNgulik 💻