Framework Flutter - Namer App
Pada pertemuan minggu ke-12 perkuliahan mata kuliah Pemrograman Perangkat Bergerak, kami membahas tentang framework baru dalam pengembangan aplikasi perangkat lunak berbasis Android, yaitu Flutter. Sebagai tugas latihan, kami diminta membuat aplikasi pertama menggunakan framework Flutter bernama Namer App. Aplikasi ini menghasilkan nama yang terkesan keren, seperti "newstay", "lightstream", "mainbrake", atau "graypine". Pengguna dapat meminta nama berikutnya, memfavoritkan nama saat ini, dan meninjau daftar nama yang difavoritkan di halaman terpisah. Aplikasi ini responsif terhadap berbagai ukuran layar.
Untuk membuat aplikasi Namer App, langkah pertama yang harus dilakukan adalah membuat project Flutter menggunakan Visual Studio Code. Buka palet perintah (dengan F1 atau Ctrl+Shift+P atau Shift+Cmd+P). Ketik "flutter new". Pilih perintah Flutter: New Project.
Berikutnya, pilih Application lalu folder tempat proyek akan dibuat.
Kemudian, beri nama proyek yang akan dibuat.
Flutter akan otomatis meng-generate starter pack project. Berikut ini struktur project Flutter.
Langkah selanjutnya adalah memodifikasi berkas main.dart, menambahkan widget-widget yang dibutuhkan untuk membuat aplikasi Namer App. Perubahan berkas main.dart dapat dilihat pada kode dibawah ini.
Kode di atas adalah sebuah aplikasi Flutter sederhana yang menggunakan paket english_words untuk menghasilkan pasangan kata acak dan paket provider untuk manajemen status. Aplikasi ini terdiri dari beberapa komponen utama:
- MyApp: Kelas ini adalah titik masuk utama aplikasi. Aplikasi menggunakan ChangeNotifierProvider untuk menyediakan instance MyAppState ke seluruh widget dalam aplikasi. MaterialApp digunakan untuk mengatur tema dan layar awal aplikasi (MyHomePage).
- MyAppState: Kelas ini adalah model status yang mengelola pasangan kata acak saat ini (current), daftar favorit (favorites), dan menyediakan metode untuk menghasilkan pasangan kata baru (getNext) serta menambah atau menghapus pasangan kata dari daftar favorit (toggleFavorite). Ketika ada perubahan pada status, notifyListeners() dipanggil untuk memberi tahu widget yang mendengarkan perubahan.
- MyHomePage: Kelas ini adalah layar utama aplikasi yang terdiri dari navigasi menggunakan NavigationRail yang memungkinkan pengguna beralih antara dua halaman: GeneratorPage dan FavoritesPage. Status indeks terpilih disimpan dalam selectedIndex.
- GeneratorPage: Kelas ini adalah halaman yang menampilkan pasangan kata acak saat ini. Pengguna dapat menandai pasangan kata sebagai favorit atau menghasilkan pasangan kata baru dengan menekan tombol yang sesuai. Ikon favorit berubah sesuai dengan status pasangan kata dalam daftar favorit.
- FavoritesPage: Kelas ini adalah halaman yang menampilkan daftar pasangan kata yang telah ditandai sebagai favorit. Jika daftar favorit kosong, pesan "No favorites yet." akan ditampilkan.
- BigCard: Kelas ini adalah widget yang menampilkan pasangan kata acak dalam sebuah kartu besar dengan gaya teks yang sesuai tema aplikasi.
Secara keseluruhan, aplikasi ini menggabungkan penggunaan provider untuk manajemen status, english_words untuk menghasilkan konten, dan komponen UI Flutter untuk membangun antarmuka pengguna yang responsif dan dinamis.
Terakhir, kita dapat menjalankan aplikasi. Berikut tampilan aplikasi Namer App menggunakan perangkat Chrome (web-javascript).
Komentar
Posting Komentar