Card image cap
[Flutter][16] Form (Bagian 1) TextField, Decoration, Password, Number
Tuesday, 23 Apr 2019

Hello world,

Setelah lama tidak menulis tentang flutter, kali ini saya mau masuk ke pembahasan yang modulnya sering dipakai yaitu form. Di dalam aplikasi dimanapun dan dengan bahasa pemrograman apapun pasti sebagian besar membutuhkan form. Karena penggunaan form sangat banyak maka untuk pembahasan mengenai form akan saya bagi menjadi beberapa bagian. Pada bagian pertama kali ini akan membahas secara detail (saya usahakan detail hehe) mengenai penggunaan TextField.

1. TextField

Berikut Ini adalah cara dasar penggunaan textfield (tanda huruf tebal). Dari contoh di bawah, saat aplikasi dijalankan maka akan menampilkan sebuah form input (textfield) dan sebuah tombol submit. Disini textfield bisa diisi tetapi belum bisa mengirim data. Tombol submit juga belum berfungsi.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("My Apps"),
),
body: new Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: [
TextField(),
RaisedButton(
child: Text(
"Submit",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {},
),
],
),
),
);
}
}

2. Decoration

Kita dapat menambahkan decoration berupa label (labelText) dan placeholder (hintText) pada form dengan cara sebagai berikut:

TextField(
decoration: new InputDecoration(hintText: "Nama Lengkap", labelText: "Nama"),
),

Selain itu kita juga dapat menambahkan icon pada textField.

TextField(
    decoration: new InputDecoration(hintText: "Nama User", labelText: "Nama", icon: Icon(Icons.people)),
),

Border, secara default border pada textfield diset UnderlineInputBorder, yaitu textfield dengan border yang hanya ada pada bagian bawah textfield. Tetapi disini kita bisa mengubahnya menjadi border pada keempat bagian yaitu OutlineInputBorder.

TextField(
decoration: new InputDecoration(
hintText: "Nama User",
labelText: "Nama",
icon: Icon(Icons.people),
border: OutlineInputBorder()
),
),

Selain itu kita juga dapat mengatur border radiusnya yaitu dengan cara berikut.

TextField(
decoration: new InputDecoration(
hintText: "Nama User",
labelText: "Nama",
icon: Icon(Icons.people),
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0)
),
),
),

3. KeyboardType Number

Terkadang kita membutuhkan form input yang berisi angka-angka, sehingga yang dibutuhkan adalah TextField khusus yang hanya bisa diisi dengan tipe number. Maka untuk penggunaan flutter kita harus mengganti keyboard type pada textfield sehingga saat akan diisi maka keyboard yang muncul pada handphone kita adalah keyboard angka saja.

TextField(
keyboardType: TextInputType.numberWithOptions(),
),


4. Password

Untuk menginput password, kita membutuhkan textfield khusus yang jika diisi maka text akan berubah menjadi ***. Di dalam flutter kita dapat menggunakan obscureText,.

TextField(
obscureText : true
),


Mungkin cukup sekian untuk kali ini. Selebihnya saya lanjutkan di bagian kedua. 


Selamat Mencoba :)