Tujuan Pembelajaran
- Mengenal widget input dasar: TextField, Button, dan Switch.
- Menggunakan Theme dan TextStyle untuk menyeragamkan tampilan.
- Menerapkan InputDecoration pada TextField.
- Menyusun antarmuka yang konsisten dan mudah dipakai.
Uraian Materi
Kualitas aplikasi sangat dipengaruhi oleh konsistensi dan kerapian antarmuka. Widget TextField menangkap masukan teks, sedangkan TextFormField menyediakan integrasi awal dengan validasi form yang akan diperdalam pada pertemuan form.
TextField(
decoration: InputDecoration(
labelText: 'Nama Lengkap',
hintText: 'Ketik nama Anda',
prefixIcon: const Icon(Icons.person),
border: OutlineInputBorder(),
),
)Widget masukan lain seperti Switch, Checkbox, dan Slider dipakai untuk input non-teks. Tombol aksi menggunakan ElevatedButton, OutlinedButton, atau TextButton sesuai tingkat kepentingan.
Memanfaatkan Theme
Ketimbang mengatur warna secara manual di tiap widget, ThemeData pada MaterialApp menyeragamkan warna utama, warna aksen, dan gaya teks aplikasi. TextStyle mengatur font, ukuran, dan ketebalan teks secara terpusat.
Membaca Nilai Input
Nilai teks dibaca dengan menyimpan controller: TextController melalui controller.text. Menjaga controller tetap hidup pada State dan membuangnya pada dispose merupakan kebersihan kode yang ditekankan.
Prinsip UI yang Baik
Peserta diajak menerapkan prinsip: hierarki visual (judul menonjol), ruang kosong yang cukup, kontras warna, dan ukuran area sentuh yang nyaman. Kerapian serta konsistensi dijaga agar aplikasi terasa profesional.
Sifat Stateful Input
Tatkala pengguna mengetik, nilai pada TextField tersimpan pada controller-nya sendiri. Untuk memanfaatkan nilai tersebut di tempat lain, peserta menyimpan controller pada State dan membacanya saat dibutuhkan. Peran State ini menghubungkan materi input dengan materi state management yang akan datang.
Macam Tombol dan Konteks Penggunaannya
ElevatedButton memberikan aksen kuat untuk aksi utama, OutlinedButton untuk aksi sekunder, dan TextButton untuk aksi tersembunyi seperti tautan. Pemilihan jenis tombol disesuaikan dengan tingkat kepentingan tindakan. Konsistensi penggunaan tombol membuat pengguna memahami hierarki aksi pada aplikasi.
Accessibility dan Ukuran Area Sentuh
Area sentuh yang terlalu kecil menyulitkan pengguna. Flutter memberi panduan ukuran sentuh minimal yang nyaman, dibantu properti seperti padding pada tombol. Peserta dilatih memperhatikan kenyamanan pengguna, termasuk kontras teks dan tata letak yang sesuai untuk berbagai ukuran layar.
Menyetel Tema Global
Alih-alih mengatur warna setiap tombol satu per satu, menentukan ThemeData pada MaterialApp menyebarkan gaya ke seluruh aplikasi secara konsisten. Peserta berlatih mengubah warna primer, aksen, dan tema gelap-terang, lalu mengamati seluruh antarmuka berubah otomatis.
Aktivitas Pembelajaran
- Menjelaskan fungsi setiap widget input.
- Praktik membuat form sederhana berisi TextField dan Button.
- Menerapkan ThemeData pada proyek.
- Mengevaluasi kerapian tampilan antar praktikan.
Tugas dan Latihan
- Buat halaman input data diri lengkap dengan InputDecoration.
- Terapkan tema warna kampus PalComTech.
- Jalankan aplikasi di perangkat/emulator dan catat tampilannya.
Evaluasi
Evaluasi dilakukan melalui pengamatan hasil praktikum, kuis singkat di akhir pertemuan, dan pemantauan proyek. Peserta yang belum mencapai indikator tertentu diberikan remedial melalui bimbingan ulang dan latihan tambahan pada pertemuan berikutnya.
Panduan Belajar Mandiri
Untuk menguatkan pemahaman, peserta disarankan membaca ulang kode yang telah dibuat, mencoba memodifikasi nilai dan properti, lalu mengamati perubahannya melalui hot reload. Eksperimen kecil-kecil semacam ini membangun intuisi yang tidak diperoleh hanya dari teori.
Kesulitan yang ditemui selama praktik dicatat pada jurnal belajar dan dibawa ke pertemuan berikutnya. Konsistensi belajar mandiri di antara sesi mempercepat penguasaan materi dan membuat praktikum di kelas berjalan lebih efektif.
Ringkasan Pertemuan
Pada pertemuan ke-8 fokus pembelajaran adalah widget input dan pemrograman ui yang rapih. Seluruh indikator tujuan difokuskan pada penguasaan materi tersebut secara praktis, sehingga peserta tidak hanya mengenal konsep tetapi mampu menerapkannya langsung dalam proyek Flutter yang sedang dikembangkan. Ringkasan nilai utama: mengenal widget input dasar: textfield, button, dan switch..
Kemampuan peserta diukur melalui penyelesaian latihan yang mencerminkan penerapan nyata, bukan sekadar hafalan. Setiap konsep baru selalu dikaitkan dengan materi sebelumnya agar terbentuk pemahaman yang utuh dan berkesinambungan sepanjang kurikulum.
Refleksi Diri
Bagian berikut mengajak peserta menelaah kembali sejauh mana materi telah dikuasai. Kejujuran dalam menilai diri menentukan efektivitas langkah perbaikan selanjutnya.
- Apakah saya dapat menjelaskan kembali pokok materi pertemuan ini tanpa melihat catatan?
- Apakah saya berhasil menyelesaikan seluruh latihan praktikum secara mandiri?
- Bila ada kendala, bagian manakah yang paling sulit dan bagaimana rencana saya mengatasinya?
Asesmen dan Tindak Lanjut
Hasil praktikum dan kuis digunakan untuk memetakan penguasaan peserta. Peserta yang nilainya belum memenuhi kriteria mengulang latihan pada bagian yang kurang dengan pendampingan, sedangkan yang telah menguasai diberikan pengayaan berupa pengembangan fitur tambahan. Catatan perbaikan disampaikan melalui umpan balik tertulis atau lisan.
Kesetiaan mengikuti alur pertemuan demi pertemuan merupakan kunci keberhasilan penguasaan widget dan tata letak antarmuka aplikasi. Materi berikutnya dibangun di atas kompetensi yang telah dicapai, sehingga menuntaskan pembelajaran setiap pertemuan menjadi bagian penting dari pencapaian akhir. Peserta disarankan mempersiapkan diri membaca panduan praktikum sebelum pertemuan berikutnya tiba.
Dengan selesainya pertemuan ini, peserta menambah satu kompetensi pada peta belajar Mobile Programming. Kemajuan itu dicatat dan menjadi dasar penilaian akhir serta bahan diskusi proyek yang menutup keseluruhan kurikulum.