Sebelum kamu memulai untuk belajar tentang Flutter, ada baiknya kamu harus mengenal terlebih dahulu Desain Input Field yang Ramah Pengguna dengan Widget TextField di Flutter. Kamu juga bisa belajar lebih dalam lagi tentang Flutter di kelas Flutter bersama BuildWithAngga.
Pada pembahasan artikel ini, kita akan membahas Desain Input Field yang Ramah Pengguna dengan Widget TextField di Flutter. Daripada penasaran, yuk kita bedah!
Flutter merupakan sebuah framework open-source yang dibuat oleh Google yang bertujuan untuk dapat membuat aplikasi antarmuka yang responsif dan konsisten di berbagai platform, contohnya seperti IOS, Android, Web maupun Desktop. Satu kode yang digunakan sebagai sumber utama bagi developer agar aplikasi yang dikembangkan dapat berjalan dengan baik, yaitu dengan menggunakan bahasa pemrograman Dart. Dengan menggunakan Flutter dapat membantu developer dalam membuat aplikasi yang kaya akan fitur, kinerja dan tampilan yang baik.
Apa itu Text Field?
Text Field adalah sebuah widget pada Flutter yang digunakan untuk menerima inputan berupa teks dari pengguna. Widget ini dapat memungkinkan kita sebagai pengguna aplikasi untuk dapat memasukkan teks dengan menggunakan keyboard. Manfaat menggunakan Text Field ini sangat beragam, biasanya penggunaan Text Field ini digunakan pada formulir, kuesioner, dan input lainnya.
Bagaimana Cara Mendesain Input Field yang Ramah Pengguna dengan Widget TextField di Flutter?
- Penggunaan Widget Text Field
Widget TextField ini digunakan oleh developer untuk membuat input field sebagai tempat untuk pengguna memasukkan teks seperti nama, alamat email, kata sandi, konfirmasi kata sandi, dan sebagainya.
Contoh penggunaan sederhana widget TextField:
TextField(
decoration: InputDecoration(
labelText: 'Nama Lengkap',
),
)Pada bagian penggunaan widget TextField, developer biasanya menambahkan properti decoration untuk dapat menambahkan label, placeholder, atau ikon pada TextField.
2. Mengakses Hasil Input Pengguna
Pada widget TextField, developer dapat mengakses data yang dimasukkan oleh pengguna ke dalam TextField. Tujuannya adalah untuk dapat menangani perubahan data yang dibuat oleh pengguna. Pada tahap ini developer dapat menggunakan properti TextEditingController dan properti OnChange.
3. Penggunaan Properti TextEditingController
TextEditingController merupakan properti yang digunakan oleh developer untuk dapat mengontrol TextField. Developer dapat mengakses dan mengubah teks yang dimasukkan oleh pengguna. Kemudian dengan TextEditingController, developer dapat menetapkan nilai awal atau default pada input field.
Contoh penggunaan properti TextEditingController:
TextEditingController _controller = TextEditingController();
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Kata Sandi Baru',
),
)Output penggunaan properti TextEditingController:
- 4. Penggunaan Properti OnChange
OnChange merupakan properti TextField yang digunakan untuk dapat menangani perubahan pada nilai TextField yang sedang diinput atau dihapus oleh pengguna. Setiap perubahan pada input field akan dicatat saat developer menggunakan properti OnChange.
Contoh penggunaan properti OnChange:
TextField(
onChanged: (value) {
print(value);
},
decoration: InputDecoration(
labelText: 'Masukkan jawaban anda',
),
)Output penggunaan properti OnChange:
5. Penggunaan Properti OnSubmitted
OnSubmitted adalah properti TextField yang digunakan oleh untuk dapat menangani perubahan yang dilakukan pengguna setelah menekan tombol “Submit” atau “Done” pada keyboard. Dengan menggunakan properti ini dapat memudahkan developer dalam menginput data setelah pengguna selesai memasukkan teks.
Contoh penggunaan properti OnSubmitted:
TextField(
onSubmitted: (value) {
print(value);
},
decoration: InputDecoration(
labelText: 'Masukkan jawaban anda',
),
)6. Penggunaan Properti OnEditingComplete
OnEditingComplete merupakan properti TextField yang tujuannya untuk memudahkan developer dalam menentukan fungsi yang akan dipanggil ketika pengguna telah menyelesaikan pengeditan teks setelah menekan tombol “Done” pada keyboard. Pasti teman-teman bakal bertanya apa perbedaannya OnSubmitted dan OnEditingComplete? jawabannya berbeda. Karena OnEditingComplete akan dipanggil tanpa mengirimkan teks yang dimasukkan oleh pengguna.
Contoh penggunaan OnEditingComplete:
TextField(
onEditingComplete: () {
print("Teks Diterima");
},
decoration: InputDecoration(
labelText: 'Masukkan jawaban anda',
),
)Kesimpulan
Dengan menggunakan kombinasi TextEditingController, OnChanged, OnSubmitted, dan OnEditingComplete, teman-teman dapat membuat sebuah aplikasi yang memberikan pengalaman yang lebih interaktif. Menyimpan dan memproses data dengan lebih efisien, serta menangani aksi dari pengguna dengan lebih baik dalam aplikasi Flutter yang teman-teman kembangkan. Hal ini memberikan fleksibilitas dan kontrol yang diperlukan untuk membuat input field yang berfungsi dengan baik sesuai dengan kebutuhan aplikasi teman-teman.
Kamu bisa mempelajarinya lebih lanjut dengan mengikuti kelas online gratis belajar flutter di BuildWithAngga loh!😍 Dengan belajar di BuildWithAngga kamu bisa belajar dengan mentor yang berpengalaman dan selalu siap membantu kamu untuk meningkatkan skill programming kamu. Eitss tunggu dulu, setiap kamu menyelesaikan kelasnya kamu bakal dikasih sertifikat loh!🤩 Yuk buruan belajar bersama BuildWithAngga.
