Flutter – Input User menggunakan TextField

Ahmad Miqdad

September 19, 2022

Input User

Aplikasi Mobil umumnya memiliki interaksi terhadap penggunanya, dan salah satu bentuk interaksi dengan pengguna adalah dengan menerima input dari pengguna. Dalam menerima input dari pengguna pasti berkaitan denga state yang berubah-rubah. Karena itu umumnya input widget akan ditempatkan di dalam StatefulWidget.

TextField

Widget TextField merupakan salah satu input pengguna yang umumnya pada aplikasi mobile dan Widget Textfield menerima input berupa text yang berasal dari Keyboard.

Pada widget Textfield terdapat beberapa property yang berguna jika kita menggunakan widget ini, seperti

InputDecoration : property ini digunakan ketika kita ingin membuat sebuah text petunjuk (hintText) pada TextField.

hintText : property terdapat di dalam kelas InputDecoration, property ini digunakan ketika kita ingin membuat sebuah text petunjuk untuk user.

hintStyle : property ini digunakan untuk memberi style kepada hintText yang digunakan, Jangan lupa juga gunakan kelas TextStyle saat akan memberi style

Dalam penggunaanya kita perlu menyiapkan Layout Form menggunakan TextField Widget, Button Widget, dan Widget Text di Dalam Stateful Widget karna state yang akan berubah ubah. Untuk membuat Layout Form cukup mengikuti kode berikut

class InputUser extends StatefulWidget {

const InputUser({Key? key}) : super(key: key);

@override

State<InputUser> createState() => _InputUserState();

}

class _InputUserState extends State<InputUser> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text(‘Penyimpanan Local’)),

body: Center(

child: Padding(

padding: const EdgeInsets.all(25.0),

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text(”),

const TextField(

decoration: InputDecoration(

labelText: “Masukkan Nama”,

RaisedButton(child: Text(‘proses’), onPressed: () {})

),)),);

}

Berikut hasilnya kode diatas

Lalu kita akan menggunakan TextField ini untuk bisa kita menulis nama kita lalu bisa di print dalam Widget Text kosong yang telah kita buat.

Buat Variabel yang berisi TextEditingController pada State<InputUser> dengan nama textController . Berikut contoh kodenya

class _InputUserState extends State<InputUser> {

final textController= TextEditingController();

Setelah itu definisikan variabel textController ke dalam TextField menggunakan properti controller. Berikut contoh Kodenya

TextField(

controller: textController, //definisikan variabel controller

decoration: InputDecoration(

labelText: “Masukkan Nama”,

Dan jangan juga untuk mendefinisikan variabel textControler kita di dalam Widget Text kosong yang telah kita buat sebelumnya. Berikut contoh kodenya.

Text(textController.text),

Setelah itu buat fungsi yang kita namakan changeText dan isi juga fungsi setState agar text yang kita ingin ubah bisa berubah. Berikut contoh Kodenya

void changeText(){

setState(() {

textController.text;

});

}

Setelah membuat fungsi changeText lalu panggil ke dalan onPressed yang ada dalam Widget Button. Berikut contoh kodenya

RaisedButton(child: Text(‘proses’), onPressed: () {

changeText(); // Memanggil Funsi changeText

})

Setelah sudah kita buat fungsi changeText bisa kita coba untuk menjalankan aplikasi kita. Berikut hasil akhirnya.

Bila berhasil, maka pembahasan kita untuk Input User menggunakan TextField telah selesai 🎉