Nama : Florentino Benedictus
NRP : 5025201222
Tahun : 2024
Kelas : Pemrograman Perangkat Bergerak I
Link Implementasi : lib/src/shared/router.dart, lib/src/shared/extensions.dart, lib/src/shared/app.dart, lib/src/shared/views/adaptive_navigation.dart, lib/src/features/home/view/home_screen.dart, lib/src/shared/providers/theme.dart, lib/src/features/home/view/home_highlight.dart, lib/src/shared/views/outlined_card.dart, lib/src/features/playlists/view/playlist_songs.dart
Tugas 12 - Flutter Music Application
Pada tugas ini, digunakan diperkenalkan framework berbeda yaitu Flutter. Flutter merupakan salah satu framework yang dapat digunakan untuk membuat aplikasi Android dan menggunakan bahasa pemrograman Dart. Pengerjaan tugas menggunakan referensi Google Codelab - Flutter Boring to Beautiful dan beberapa tools meliputi: Visual Studio Code, Flutter Visual Studio Code Extension, Android Studio (untuk Android SDK dan VM android), dan Flutter SDK.
1. Inisiasi Proyek
Pertama-tama clone project yang disediakan pada tutorial lalu pindah directory ke step_01. Kemudian run start ms-settings:developers pada Powershell Windows sehingga kode dapat di run (debug) melalui Visual Studio Code.
Selanjutnya pilih device Chrome sehingga program akan dijalankan pada Google Chrome Windows kemudian pilih tombol di kanan atas dan Start Debugging, terlihat tampilannya adalah sebagai berikut. Aplikasi template merupakan MyArtist yang merupakan aplikasi music yang dapat dibuka melalui web atau mobile.
Jika device yang dipilih adalah VM android, maka tampilannya sebagai berikut. Tampilan inilah yang akan diperbaiki.
2. Memanfaatkan Tipografi
Selanjutnya buka lib/src/shared/router.dart untuk mengubah icon dari arrow_right_rounded agar sesuai dengan kegunaan dari masing-masing tombol navigasi.
Kemudian import google_fonts.dart pada lib/src/shared/extensions.dart agar teks dapat diubah ke font Montserrat. Jika google_fonts belum terdownload gunakan quick fix pada import google_fonts.dart-> add dependencies untuk mendownload google_fonts secara otomatis. Selanjutnya hot reload aplikasi sehingga tampilan font terupdate.
3. Menambahkan Tema
Selanjutnya ubah lib/src/shared/app.dart untuk menambahkan tema terang dan gelap.
Tambahkan juga colorScheme pada lib/src/shared/views/outlined_card.dart
Maka mode terang dan gelap sudah dapat diakses melalui pojok kanan atas.
4. Menambahkan Desain Adaptif
Selanjutnya tambahkan batas dimensi untuk tablet dan mobile pada lib/src/shared/views/adaptive_navigation.dart sehingga desain menjadi adaptif sesuai dengan perangkat.
Kemudian buka lib/src/features/home/view/home_screen.dart dan tambahkan layout kondisional ketika perangkat mobile.
Terlihat bahwa ketika di-run ulang pada perangkat mobile, tampilan menu navigasi akan berpindah ke bagian bawah sehingga lebih mudah digunakan.
Kemudian kembali ke home_screen.dart, ubah seluruh EdgeInsets sesuai dengan kebutuhan sehingga ukuran padding pada widget akan berubah. Tambahkan juga SizedBox untuk memberi jarak antar playlist. Lakukan juga pada lib/src/features/home/view/home_highlight.dart.
Hard reload, maka akan terlihat bahwa tampilan spacing menjadi lebih rapi.
5. Menambahkan Gerakan dan Animasi
Selanjutnya tambahkan animasi transisi layar pada lib/src/shared/providers/theme.dart
Sehingga ketika terjadi transisi layar maka akan dilakukan animasi, pada gambar terlihat animasi FadeUpwardsPage pada perangkat Android.
Selanjutnya buka lib/src/shared/views/outlined_card.dart untuk menambahkan kondisi state dan status hovered_
Terlihat bahwa sekarang playlist yang di-hover akan membulatkan sudut dan mengubah opasitas.
Selanjutnya tambahkan HoverableSongPlayButton pada lib/src/features/playlists/view/playlist_songs.dart sehingga ketika di-hover, angka akan berubah menjadi icon PlayButton.
6. Hasil Akhir Aplikasi
Berikut adalah demo hasil akhir aplikasi pada browser dan Android:
Berikut adalah link dari file yang dimodifikasi dari template untuk mengimplementasikan program:
No comments:
Post a Comment