Belajar Widget Flutter : Input Widget

Input Widget

Salah satu bentuk interaksi dengan pengguna adalah dengan menerima input. Ada beberapa input widget yang bisa digunakan supaya pengguna bisa berinteraksi dengan aplikasi. 

Perhatikan bahwa input pengguna ini berkaitan dengan state yang dapat sering berubah. Karena itu umumnya input widget akan ditempatkan di dalam StatefulWidget.

TextField

TextField merupakan sebuah inputan untuk teks. Ada 2 cara untuk mendapatkan informasi teks yang sedang diinput, yaitu pertama dengan TextEditingController dengan seperti berikut:


  1. TextEditingController _controller = TextEditingController();

  2.  

  3. TextField(

  4.  controller: _controller,

  5. )





Di mana mendapatkan atau mengatur teks yang sedang diinput bisa dengan cara seperti berikut:


  1. _controller.text;





Sedangkan cara kedua adalah dengan menggunakan onChange seperti pada contoh berikut:


  1. String _email = '';

  2.  

  3. TextField(

  4.  onChanged: (String value) {

  5.    setState(() {

  6.      _email = value;

  7.    });

  8.  },

  9. )





onChanged akan bekerja setiap ada perubahan pada inputan.
20200615133854be293b277e647a105d71764fe31ef2c3.jpeg

Switch

Switch merupakan inputan untuk on dan off, perhatikan contoh berikut:
  1. class _FirstScreenState extends State<FirstScreen> {
  2.   bool lightOn = false;
  3.  
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(
  8.         title: Text('First Screen'),
  9.       ),
  10.       body: Switch(
  11.         value: lightOn,
  12.         onChanged: (bool value) {
  13.           setState(() {
  14.             lightOn = value;
  15.           });
  16.         },
  17.       ),
  18.     );
  19.   }
  20. }

Pada contoh tersebut value dari Switch berupa boolean di mana ketika boolean tersebut false maka Switch akan off. Untuk mengganti value tersebut berada pada onChanged.
20200615134103288e1ccfa4b570f55e5673ecd214367f.gif

Radio

Radio merupakan inputan yang digunakan untuk memilih salah satu dari beberapa pilihan dalam suatu kelompok. Berikut contohnya:
  1. class _FirstScreenState extends State<FirstScreen> {
  2.   String language;
  3.  
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(
  8.         title: Text('First Screen'),
  9.       ),
  10.       body: Column(
  11.         mainAxisSize: MainAxisSize.min,
  12.         children: <Widget>[
  13.           ListTile(
  14.             leading: Radio<String>(
  15.               value: 'Dart',
  16.               groupValue: language,
  17.               onChanged: (String value) {
  18.                 setState(() {
  19.                   language = value;
  20.                 });
  21.               },
  22.             ),
  23.             title: Text('Dart'),
  24.           ),
  25.           ListTile(
  26.             leading: Radio<String>(
  27.               value: 'Kotlin',
  28.               groupValue: language,
  29.               onChanged: (String value) {
  30.                 setState(() {
  31.                   language = value;
  32.                 });
  33.               },
  34.             ),
  35.             title: Text('Kotlin'),
  36.           ),
  37.           ListTile(
  38.             leading: Radio<String>(
  39.               value: 'Swift',
  40.               groupValue: language,
  41.               onChanged: (String value) {
  42.                 setState(() {
  43.                   language = value;
  44.                 });
  45.               },
  46.             ),
  47.             title: Text('Swift'),
  48.           ),
  49.         ],
  50.       ),
  51.     );
  52.   }
  53. }

Pada contoh tersebut terdapat variable language yang digunakan pada groupValue tiap Radio. 
Language inilah yang menyimpan nilai Radio yang dipilih. Nilainya akan berubah ketika fungsi onChanged terpanggil.
20200615134225eb726afddb458c3eadd628bd8880fc49.jpeg

Checkbox

Checkbox merupakan inputan benar atau salah. Checkbox akan berisi centang jika nilainya adalah benar dan kosong jika salah. Seperti pada contoh berikut:
  1. class _FirstScreenState extends State<FirstScreen> {
  2.   bool agree = false;
  3.  
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(
  8.         title: Text('First Screen'),
  9.       ),
  10.       body: ListTile(
  11.         leading: Checkbox(
  12.           value: agree,
  13.           onChanged: (bool value) {
  14.             setState(() {
  15.               agree = value;
  16.             });
  17.           },
  18.         ),
  19.         title: Text('Agree / Disagree'),
  20.       ),
  21.     );
  22.   }
  23. }

Kode di atas jika dijalankan akan tampil seperti berikut:
2020061513503773b810212a6c6e621bd0fef4ca845179.jpeg
Ada beberapa tautan yang dapat Anda baca untuk memahami tentang widget-widget input yang ada pada Flutter, antara lain:

Komentar

Posting Komentar