Aplikasi Mobile memiliki interaksi terhadap pengguna, salah satu bentuk interaksi dengan pengguna, menerima input dari pengguna. Menerima input dari pengguna berkaitan dengan state yang berubah-rubah. Maka itu, input widget akan ditempatkan di dalam StatefulWidget.
TextField
Widget TextField merupakan salah satu input pengguna yang umum pada aplikasi mobile dan Widget Textfield menerima input berupa text yang berasal dari Keyboard.
Pada widget Textfield terdapat beberapa property :
- InputDecoration : Untuk membuat sebuah text petunjuk (hintText) pada TextField.
- hintText : Untuk membuat sebuah text petunjuk untuk user.
- hintStyle : Untuk memberi style kepada hintText yang digunakan, Jangan lupa juga gunakan kelas TextStyle saat akan memberi style
Penggunaa Layout Form menggunakan TextField Widget, Button Widget, dan Widget Text, Pada Stateful Widget karena state yang akan berubah ubah.
Source :
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: () {})
],
),)),);
}
}
Hasil :
Gunakan TextField ini untuk menulis nama lalu bisa di print dalam Widget Text kosong yang telah dibuat.
Buat Variabel yang berisi TextEditingController pada State<InputUser> dengan nama textController.
class _InputUserState extends State<InputUser> {
final textController= TextEditingController();
Setelah itu definisikan variabel textController ke dalam TextField menggunakan properti controller.
TextField(
controller: textController, //definisikan variabel controller
decoration: InputDecoration(
labelText: “Masukkan Nama”,
),
),
Definisikan variabel textControler dalam Widget Text kosong yang telah dibuat sebelumnya.
Text(textController.text),
Setelah itu buat fungsi yang dinamakan changeText dan isi juga fungsi setState agar text yang ingin diubah bisa berubah.
void changeText(){
setState(() {
textController.text;
});
}
Setelah membuat fungsi changeText lalu panggil ke dalan onPressed yang ada dalam Widget Button.
RaisedButton(child: Text(‘proses’), onPressed: () {
changeText(); // Memanggil Funsi changeText
})
