Tugas PPB: Flutter - Music Application

 

TUGAS PPB

FLUTTER - MUSIC APPLICATION



Nama: Muhammad Lintang Panjerino

NRP: 5025201045

Kelas: PPB I

Tahun: 2024

Link Github: Tugas 12 - Fluttter Music App


Pada Tugas PPB kali ini, diberikan tugas untuk membuat proyek Flutter Music Application dengan menggunakan framework Flutter pada VS Code. Secara garis besar, proyek Flutter Music Application ini adalah sebuah aplikasi musik yang menampilkan daftar lagu, lagu yang baru dirilis, playlists, top songs, artists, dan deskripsi.

Untuk memulai pengerjaan proyek, langkah awal yang dilakukan adalah melakukan clone project dari repository github berikut https://github.com/flutter/codelabs. Selain itu, dapat juga dilakukan dengan cara berikut:

"git clone https://github.com/flutter/codelabs.git" > "cd codelabs/boring_to_beautiful/step_01/".

Kemudian buka folder proyek tersebut pada VS Code.

Setelah folder proyek terbuka, langsung menuju ke file main.dart. Di file ini proyek dapat dijalankan dengan cara memilih device yang akan digunakan (untuk awal pilih Chrome), melihat tanda segitiga di bagian pojok kanan atas, kemudian klik tanda panah di sebelah kiri segitiga tersebut dan pilih "Start debugging" (jangan pilih "Run Code"). Berikut adalah tampilan awal dari proyek Flutter Music Application.

Dari template yang sudah disediakan, pada tugas kali ini akan mengerjakan 4 hal, yaitu memperbaiki tipografi, memperbaiki tema, menambahkan desain adaptif, serta menambahkan gerakan dan animasi pada aplikasi.

Setelah memperbaiki keempat hal di atas, coba jalankan kembali aplikasi Flutter Music Application. Sekarang aplikasi sudah berganti tema, bisa menggunakan mode "light" dan "dark", memiliki desain yang adaptif, serta memiliki tipografi dan animasi yang menarik.

Berikut adalah tampilan akhir aplikasi pada device Chrome

Light mode

Dark Mode

Berikut adalah tampilan akhir aplikasi pada device Android

Light Mode

Dark Mode

Berikut adalah kode sumber proyek Flutter Music Application

main.dart

router.dart

extensions.dart

app.dart

theme.dart

outlined_card.dart

Referensi

https://codelabs.developers.google.com/codelabs/flutter-boring-to-beautiful?hl=id#0


Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 2 PPB

Gambar
  TUGAS 2 PPB PROJEK PERTAMA JETPACK COMPOSE - GREETING Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Tahun: 2024 Link Github:  Tugas 2 - Greeting Pada Tugas 2 PPB, diberikan tugas untuk membuat projek pertama aplikasi mobile sederhana dengan Jetpack Compose. Projek pertama yang dibuat adalah projek sederhana untuk memperkenalkan diri. Projek ini hanya mengubah sedikit dari template awal yang sudah disediakan. Pada projek ini, digunakan software berupa Android Studio dan memakai bahasa Kotlin. Berikut adalah langkah untuk mengerjakan projek ini Setelah membuat projek baru pada Android Studio, tampilan akan langsung diarahkan ke file MainActivity.kt yang merupakan file utama projek yang dapat digunakan untuk mengubah dan memodifikasi projek. Untuk melihat tampilan sementara dari aplikasi Android yang dibuat, dapat melakukan preview dengan menggunakan emulator dari Android Studio. Caranya adalah dengan memilih menu "Device Manager" di sebelah kanan sisi...
Baca selengkapnya

Tugas 3 PPB

Gambar
  TUGAS 3 PPB MEMBUAT BIRTHDAY CARD Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Tahun: 2024 Link Github:  Tugas 3 - Birthday Card Pada Tugas 3 PPB kali ini, diberikan tugas mengenal lebih dalam tentang “Composable” pada Jetpack Compose. Untuk memahami konsep “Composable” lebih mendalam secara langsung, dibuat proyek sederhana yang berupa aplikasi ucapan selamat ulang tahun sederhana. Pada proyek ini, digunakan software Android Studio dan bahasa pemrograman Kotlin. Proyek ini menggunakan referensi dari situs https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=id#0 yang kemudian dimodifikasi. Berikut adalah langkah untuk mengerjakan projek ini. Langkah pertama adalah membuat proyek baru pada Android Studio dan pilih proyek kosong “Empty Activity”. Kemudian, isi nama proyek, lokasi proyek, dan minimum SDK pada window “Empty Activity”. Setelah mengisi detail proyek, maka akan diarahkan langsung ke file MainActivity.k...
Baca selengkapnya

Tugas 4 PPB

Gambar
  TUGAS 4 PPB DICE ROLLER APPLICATION Nama: Muhammad Lintang Panjerino NRP: 5025201045 Kelas: PPB I Tahun: 2024 Link Github:  Tugas 4 - Dice Roller Pada Tugas 4 PPB kali ini, diberikan tugas memahami materi “Interaksi Button” pada Jetpack Compose. Untuk memahami konsep “Interaksi Button” lebih mendalam secara langsung, dibuat proyek sederhana yaitu aplikasi “Dice Roller” interaktif. Aplikasi ini berjalan dengan cara menekan button kemudian dadu akan menampilkan angka dadu secara acak. Dalam proyek “Dice Roller” ini akan dipelajari beberapa hal, antara lain cara menambahkan composable Button ke aplikasi Android dengan Compose, cara menambahkan perilaku ke composable Button di aplikasi Android dengan Compose, cara membuka dan mengubah kode Activity untuk aplikasi Android. Pada proyek ini, digunakan software Android Studio dan bahasa pemrograman Kotlin. Proyek ini menggunakan referensi dari situs Codelab berjudul “Membuat Aplikasi Dice Roller Interaktif” berikut https:/...
Baca selengkapnya