Flutter - Music Application
Pada pertemuan minggu ke-14 perkuliahan mata kuliah Pemrograman Perangkat Bergerak, kami membahas tentang studi kasus pengembangan aplikasi perangkat lunak menggunakan Flutter, yaitu Music Application. Sebuah aplikasi pemutar musik tempat penggemar dapat terus mengikuti kabar terbaru dari artis favoritnya. Sebuah tugas latihan, kami diminta untuk memodifikasi desain aplikasi Anda agar terlihat bagus di berbagai platform.
Typography
Perubahan pertama adalah pada NavigationRail di aplikasi awal yang memiliki tab untuk setiap rute utama, tetapi ikon utama identik. Hal ini tidak membantu karena pengguna tetap harus membaca teks setiap tab. Mulailah dengan menambahkan petunjuk visual sehingga pengguna dapat dengan cepat melihat ikon utama untuk menemukan tab yang diinginkan.
Perubahan berikutnya adalah memilih font. Gunakan Google Font dan pilih Montserrat, karena aplikasi musik ini ditujukan untuk menjadi menyenangkan dan penuh keceriaan. Pemilihan font yang tepat akan meningkatkan estetika dan daya tarik visual aplikasi, sehingga memberikan pengalaman yang lebih baik bagi pengguna.
Theme
Tema membantu membawa desain yang terstruktur dan keseragaman pada sebuah aplikasi dengan menetapkan sistem warna dan gaya teks yang terstandarisasi. Dengan tema, kita dapat dengan cepat mengimplementasikan antarmuka pengguna (UI) tanpa harus khawatir tentang detail kecil seperti menentukan warna yang tepat untuk setiap widget.
Modifikasi ini dilakukan dengan mengimplementasikan tema menggunakan Material 3 UI. Implementasi ini mencakup tema gelap (dark theme) dan terang (light theme), sehingga pengguna dapat memilih tampilan yang sesuai dengan preferensi mereka. Menggunakan Material 3 UI memungkinkan aplikasi untuk memiliki tampilan yang modern dan konsisten, serta meningkatkan pengalaman pengguna secara keseluruhan.
Adaptive Design
Dengan Flutter, kita dapat membangun aplikasi yang dapat berjalan hampir di mana saja, tetapi itu tidak berarti setiap aplikasi diharapkan berperilaku sama di semua platform. Pengguna memiliki ekspektasi yang berbeda untuk perilaku dan fitur di setiap platform.
Tidak semua layar memiliki ukuran yang sama. Jika kita mencoba menampilkan versi desktop dari aplikasi kita di ponsel, kita harus melakukan kombinasi mengecilkan dan memperbesar untuk melihat semuanya. Kita ingin aplikasi dapat mengubah tampilan berdasarkan layar tempat ia ditampilkan. Dengan desain responsif, kita dapat memastikan bahwa aplikasi kita dapat berjalan di semua ukuran layar. Untuk membuat aplikasi menjadi responsif, kita dapat menggunakan breakpoint. Breakpoint ini menentukan ukuran layar di mana aplikasi harus mengubah tata letaknya.
Layar yang lebih kecil tidak dapat menampilkan sebanyak layar yang lebih besar tanpa mengecilkan kontennya. Untuk mencegah aplikasi terlihat seperti aplikasi desktop yang diperkecil, buat tata letak terpisah untuk perangkat seluler yang menggunakan tab untuk membagi konten. Ini memberikan aplikasi nuansa yang lebih alami pada perangkat seluler.
Kemudian, ruang kosong adalah alat visual penting untuk aplikasi Anda, menciptakan jeda organisasi antara bagian-bagian. Lebih baik memiliki terlalu banyak ruang kosong daripada tidak cukup. Menambahkan lebih banyak ruang kosong lebih disukai daripada mengurangi ukuran font atau elemen visual untuk menyesuaikan lebih banyak konten ke dalam ruang. Kekurangan ruang kosong dapat menyulitkan bagi mereka yang memiliki masalah penglihatan. Terlalu banyak ruang kosong dapat mengurangi kohesi dan membuat antarmuka pengguna Anda terlihat kurang terorganisir.
Dengan menerapkan desain adaptif, aplikasi akan lebih ramah pengguna, fungsional, dan estetis di berbagai perangkat dan ukuran layar.
Motion and Animation
Gerak dan animasi adalah cara yang bagus untuk memperkenalkan pergerakan dan energi, serta memberikan umpan balik ketika pengguna berinteraksi dengan aplikasi. Menggunakan animasi antar layar dapat menciptakan transisi yang halus dan menyenangkan, yang tidak hanya memperindah tampilan tetapi juga meningkatkan pengalaman pengguna dengan membuat navigasi terasa lebih intuitif dan responsif.
Salah satu cara untuk menambahkan gerak pada aplikasi desktop adalah dengan menggunakan hover states. Hover states adalah kondisi di mana sebuah widget mengubah tampilannya (seperti warna, bentuk, atau konten) ketika pengguna mengarahkan kursor ke atasnya. Ini memberikan petunjuk visual kepada pengguna bahwa elemen tersebut interaktif, dan membuat antarmuka pengguna terasa lebih dinamis dan hidup.
Dengan mengimplementasikan PageTransitionsTheme, kita dapat mengontrol dan menyesuaikan bagaimana transisi antar halaman terjadi dalam aplikasi Anda. Misalnya, kita bisa mengatur transisi agar menggunakan animasi fade atau slide, yang membuat perpindahan antar halaman lebih halus dan menarik.
Setelah melakukan beberapa perubahan, kita dapat menjalankan aplikasi. Berikut tampilan aplikasi pada perangkat dekstop.
Berikut tampilan aplikasi pada perangkat mobile - Android.
Berikut ini kode perubahan yang dilakukan pada aplikasi Music Application.
Komentar
Posting Komentar