Dekorasi Tampilan widget TextFormField()

Selamat pagi ✊

Di tulisan kali ini, akan membahas tentang bagaimana membuat sebuah input text() dalam flutter menjadi lebih menarik. Seperti kita ketahui tampilan bawaan / awal TextFormField() kurang menarik bukan ? Coba cek kembali projek kita sebelumnya yang bernama flutter_blog di postingan sebelumnya ( cek disini )

Tampilannya sangat sederhana 👀

Nah disini kita akan mengubah tampilan menjadi lebih viewable yak, lebih estetik dan cantik 👌

Caranya !? Buka kembali projek kita ( flutter_blog ), pada bagian ini :

        body: Center(

          child: Column(

            children: [

              TextFormField(), // ubah bagian ini

              TextFormField(),

              ElevatedButton(

                onPressed: () {

                 

                },

                child: Text("Login")

              )

            ],

          )

        )

Di widget TextFormField() yang pertama kita ubah untuk menambahkan border dan properti-properti lain. Sehingga scriptnya berubah menjadi :

              TextFormField(

                decoration: InputDecoration(

hintText: "Email",

                  enabledBorder: OutlineInputBorder(

                    borderSide: BorderSide(

                      width: 3,

                      color: Colors.green

                    ),

                    borderRadius: BorderRadius.circular(10)

                  )

                ),

              ),

Disini kita membuat input teks tersebut memiliki garis ( border ) dengan tingkat ketebalan 3 px, berwarna hijau dan melengkung dengan rasio 10 dan tidak lupa memberikan hint berupa tulisan Email.

Setelah selesai coba kita Hot Restart dengan menekan tombol r di keyboard, maka hasilnya akan menjadi :

Berubah bukan ? Untuk membuat tampilan tidak melebar ke kanan atau kiri, kita bisa menggunakan widget lain untuk membungkus widget TextFormField() yaitu dengan widget Container atau dengan widget Padding().

Berikut contoh penggunaan widget Padding() untuk membungkus TextFormField() :

              Padding(

                padding: EdgeInsets.only(right: 30, left: 30, top: 30),

                child: TextFormField(

                  decoration: InputDecoration(

                    hintText: "Email",

                    enabledBorder: OutlineInputBorder(

                      borderSide: BorderSide(

                        width: 3,

                        color: Colors.green

                      ),

                      borderRadius: BorderRadius.circular(10)

                    )

                  ),

                ),

              ),

              TextFormField(),

Maka, setelah di Hot Restart tampilan dari widget TextFormField() kita akan berubah menjadi :

Nah, dari sini sudah ada gambaran untuk mengatur tampilan dari widget TextFormField() ? Coba lakukan dekorasi ulang untuk widget dibawahnya yaitu TextFormField() kedua dan tombol Login 😇

Selamat mencoba dan jangan lupa #WajibNgulik 💻