Memahami Cara Menginput Tulisan Ke Aplikasi Flutter

Menginput Tulisan Ke Aplikasi Flutter merupakan salah satu hal dasar yang hampir pasti ada di setiap aplikasi. TextField merupakan widget yang paling sering digunakan untuk menerima tulisan dari user. Flutter telah menyediakan Widget TextField dengan berbagai property yang bisa diubah-ubah.

Memproses Tulisan dari TextField

Ada 2 cara untuk memproses tulisan yang diinput ke TextField

1. Memanfaatkan property onChanged()
2. Menggunakan TextController

TextField: OnChanged()

1. Properti ini terpanggil ketika user sedang mengetik sesuatu pada TextField.
2. OnChanged akan selalu dipanggil pada setiap perubahan karakter yang diketik oleh user, oleh karena itu, pendekatan ini kurang efisien untuk menerima input dari user

TextField: OnChanged()

Contoh Sintaks:

Contoh TextField: OnChanged()

1. Buatlah aplikasi dasar flutter dengan menggunakan StatefulWidget sebagai parent widgetnya
2. Pada StatefulWidget tersebut, gunakan scaffold sebagai base widget.
3. Di dalam scaffold, tambahkan widget Text & TextField.
4. Widget Text digunakan untuk menampilkan inputtan user
5. Widget TextField digunakan untuk menerima inputan user

Contoh TextField: OnChanged()

TextField: TextEditingController()

1. TextEditingController merupakan controller pada Flutter yang berfungsi untuk menyimpan text
2. Pada saat user mengetik di TextField, text yang diketik akan terupdate secara otomatis ke TextEditingController
3. Untuk menggunakan TextEditingController, Anda harus mendeklarasikan controllernya terlebih dahulu, lalu meng-assign-kan controllernya ke suatu TextField.
4. TextEditingController juga dapat digunakan untuk meng-assign value awal sebuah TextField.

TextField: TextEditingController()

1. Terdapat properti penting yang dimiliki oleh TextEditingController(), yaitu Properti .text.
2. Properti .text Berfungsi untuk mengambil text yang disimpan oleh controller
3. Contoh sintaks
• Mengambil text dari TextEditingController: 
• String text = _controller.text ;
• Mengubah text yang ada pada TextEditingController
• _controller.text = "Initial Text";

TextField: TextEditingController()

1. TextEditingController merupakan controller pada Flutter yang berfungsi untuk menyimpan text
2. Pada saat user mengetik di TextField, text yang diketik akan terupdate secara otomatis ke TextEditingController
3. Untuk menggunakan TextEditingController, Anda harus mendeklarasikan controllernya terlebih dahulu, lalu meng-assign-kan controllernya ke suatu TextField.
4. TextEditingController juga dapat digunakan untuk meng-assign value awal sebuah TextField.

Contoh TextField: TextEditingController()

1. Pada lab ini Anda akan menggabungkan lab navigasi, passing data, dan textfield
2. Sebagai dasar, gunakan kode program lab textfield yang sudah Anda buat sebelumnya.
3. Tambahkan TextEditingController ke textfield, dan hapus property onChange yang sebelumnya digunakan
4. Kirim text yang diinput ke textfield ke halaman berikutnya menggunakan metode yang sudah di pelajari pada subbab sebelum ini

TextField: TextEditingController()

Kesimpulan

1. TextField digunakan untuk mengambil input tulisan dari user
2. TextField memiliki controller yang menyimpan hasil input user

Sumber Referensi  : developerlibs.com