Kita akan berTa'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: 'Nama', ), )
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.
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.',
),
),
