Flutter : Mengenal Properti TextField

Selamat pagi....

Standarnya, saat kita menggunakan suatu widget maka visual yang nampak akan biasa saja. Kita bisa mengubah visual atau UI dari suatu widget dengan berbagai cara, salah satunya dengan menggunakan properti InputDecoration()

Nah, kali ini kita akan ber-ta'aruf dengan widget TextField atau yang biasa digunakan untuk menginputkan teks. Pada dasarnya membuat sebuah TextField dalam Flutter tidak sulit, hanya dengan perintah :

const TextField(

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: 'Masukan Nama Anda',

),

)

Perlu kita ketahui bahwa dalam desain aplikasi menggunakan flutter pada umumnya memang simple, tetapi dengan simplenya itu tampilan yang dihasilkan juga terkesan standar saja, jadi terkesan membosankan.

Contoh TextField yang telah mengimplimentasikan InputDecoration.Nah untuk membuang tampilan yang monoton itu, dalam widget InputDecoration ada beberapa turunannya yang bisa kita gunakan untuk mengubah agar lebih menarik. Turunan itu yaitu :

• Tanpa Dekorasi / No Decoration :

Ini merupakan tampilan standar, seperti yang telah kita bahas pada pembukaan postingan ini.

• Icon 

Menambahkan ikon di samping kiri TextField. Untuk perintahnya :

TextField(

decoration: InputDecoration(

icon: Icon(Icons.star),

),

),

• PrefixIcon

Menambahkan ikon di samping kiri TextField tetapi posisinya di dalam TextField. Untuk perintahnya :

TextField(

decoration: InputDecoration(

prefixIcon: Icon(Icons.star),

),

),

• SufixIcon

Menambahkan ikon di samping kanan TextField tetapi posisinya di dalam TextField. Biasanya SufixIcon ini digunakan untuk form input password. Untuk perintahnya :

TextField(

decoration: InputDecoration(

suffixIcon: Icon(Icons.star),

),

),

• Prefix

Menambahkan ikon di samping kiri TextField tetapi posisinya di dalam TextField. Dan ikonnya bisa berupa sebuah widget apapun. Perintahnya :

TextField(

decoration: InputDecoration(

prefix: Container(width: 10, height: 10, color: Colors.red,)

),

),

• PrefixText

Mirip dengan sufix / prefix hanya saja yang ditampilkan bukan ikon. Melainkan teks. Untuk perintahnya :

TextField(

decoration: InputDecoration(

prefixText: 'Hello'

),

),

• HintText

Mirip dengan prefixtext hanya saja ketika mulai mengetik, maka teks hint akan menghilang digantikan dengan huruf atau teks yang kita inputkan.

TextField(

decoration: InputDecoration(

hintText: 'Hello',

),

),

• SufixText

Hampir sama dengan sufixicon. Untuk perintahnya :

TextField(

decoration: InputDecoration(

suffixText: 'Hello',

),

),

• LabetText

Hampir sama dengan sufixicon. Untuk perintahnya :

TextField(

decoration: InputDecoration(

labelText: 'Hello',

),

),

• Unfocused

• Focused

Dengan ini kita akan membuat widget TextField seolah-olah telah kita klik. Sehingga fokus ada di widget ini.

• HelperText

Merupakan teks yang ditampilkan di bawah widget TextField. Menjadi sebuah keterangan tambahan. Untuk perintahnya :

TextField(

decoration: InputDecoration(

helperText: 'Hello',

),

),

• ErrorText

Mirip dengan helpertext hanya tampilan yang dihasilkan akan berwarna merah seperti telah terjadi error saat input teks. Untuk perintahnya :

TextField(

decoration: InputDecoration (

errorText: 'Hello',

),

),

• Style

Keterangan di dapatkan bahwa :

This example shows hintStyle, but it works the same to set a TextStyle for labelStyle, counterStyle, errorStyle, prefixStyle, suffixStyle, and helperStyle.

Jadi, intinya kita menggunakan properti ini untuk mengubah gaya, terlebih gaya tulisan berupa ukuran, warna maupun jenis huruf.

Untuk perintahnya :

TextField(

decoration: InputDecoration (

hintText: 'Hello',

hintStyle: TextStyle(color: Colors.green),

),

),

• MaxLine

Untuk menentukan baris dari widget TextField kita. Secara default TextField akan terlihat satu baris :

TextField(

decoration: InputDecoration (

hintText: 'This is a very long hint string that would normally span three lines but it cannot.',

),

),

Tetapi menggunakan properti maxline kita bisa mengubah menjadi beberapa baris sesuai keinginan kita. Contoh :

TextField (

decoration: InputDecoration (

hintMaxLines: 2,

hintText: 'This is a very long hint string that would normally span three lines but it cannot.',

),

),

Nah, jadi itu merupakan beberapa cara atau teknik untuk mengubah sebuah wigdet TextField agar terlihat tidak monoton. Kita lanjutkan di postingan yang akan datang...

Selamat pagi dan jangan lupa ngopi 🧉

#WajibNgulik! #DigiNOW