Tujuan Pembelajaran
- Menampilkan daftar data dengan ListView dan ListTile.
- Membuat tata letak grid dengan GridView.
- Menggunakan Card untuk kelompok konten.
- Membuat navigasi antar halaman dengan NavigationBar.
Uraian Materi
Aplikasi nyata hampir selalu menampilkan kumpulan data berurutan. ListView adalah widget untuk daftar yang dapat digulir, sedangkan ListView.builder cocok untuk daftar panjang karena hanya membangun item yang tampak layar – efisien dari sisi memori.
ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return ListTile(
leading: const Icon(Icons.list),
title: Text(data[index]),
);
},
)GridView
GridView.count membuat grid dengan jumlah kolom tetap, sementara GridView.extent berdasarkan ukuran tiap sel. Grid sering dipakai untuk menu aplikasi, galeri, dan katalog produk.
Card dan ListTile
Card membungkus konten dengan sudut membulat dan bayangan sehingga tampak seperti kartu. Kombinasi Card dan ListTile menghasilkan daftar item yang rapi. ListTile menyediakan slot leading, title, subtitle, dan trailing.
NavigationBar
Aplikasi biasanya memiliki beberapa halaman utama yang diganti lewat menu bawah. NavigationBar modern bersama NavigationDestination memudahkan berpindah halaman, menggantikan BottomNavigationBar klasik.
Kolaborasi Widget
Peserta menggabungkan AppBar, Card, ListView, dan NavigationBar untuk membangun halaman katalog sederhana. Gaya visual disempurnakan menggunakan tema Material dan skema warna.
Perfektif Kinerja ListView.builder
ListView.builder hanya membangun widget yang terlihat di layar, berbeda dengan ListView biasa yang membangun seluruh item sekaligus. Untuk data ratusan bahkan ribuan, penggunaan builder sangat disarankan. Peserta memahami prinsip ini sejak dini agar aplikasi tetap ringan ketika data bertumbuh.
Menyusun Konten Card yang Informatif
Card cocok menampilkan informasi berlapis seperti judul, deskripsi, dan aksi. Penempatan leading, title, subtitle, dan trailing pada ListTile membuat daftar terstruktur. Peserta berlatih menyusun kartu dengan ikon dan teks tambahan seperti harga atau tanggal.
Struktur Navigasi Bottom
NavigationBar menampilkan tiga sampai lima tujuan utama, masing-masing dengan ikon dan label. Peserta belajar memilih ikon yang mewakili fungsi halaman serta mengelola indeks yang aktif agar tampilan berpindah sesuai pilihan.
Menghubungkan Data Statis
Sebelum masuk ke database, daftar diisi data statis (list) di dalam kode. Pola perubahan data statis menjadi dinamis akan menjadi materi penting ketika peserta mempelajari penyimpanan dan API, sehingga fondasi menampilkan list perlu benar sejak pertemuan ini.
Aktivitas Pembelajaran
- Menyimak demonstrasi ListView dan GridView.
- Praktik membuat ListTile dengan icon dan subtitle.
- Menyusun Card dalam grid.
- Mengimplementasikan NavigationBar dengan dua halaman.
Tugas dan Latihan
- Buat aplikasi daftar menu makanan lokal dengan ListView dan Card.
- Tambahkan NavigationBar minimal dengan halaman Daftar dan Profil.
- Terapkan GridView untuk galeri gambar.
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-7 fokus pembelajaran adalah widget ui lanjutan: listview, gridview, card, dan navigationbar. 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: menampilkan daftar data dengan listview dan listtile..
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.