Tugas 13 - Pemrograman Perangkat Bergerak

-

 Hesekiel Nainggolan

5025201054

PPB I

FLUTTER - MUSIC APPLICATION (MyArtist)

Pada pertemuan kali ini kita akan membuat sebuah aplikasi musik, MyArtist, sebuah aplikasi pemutar musik tempat penggemar dapat terus mengikuti kabar terbaru dari artis favoritnya. Bagian ini membahas cara memodifikasi desain aplikasi Anda agar terlihat bagus di berbagai platform. Code program dapat kita lihat pada link Github. Sebenarnya aplikasi ini sudah jadi dalam bentuk web dan windows, namun dalam bentuk android, bentuk dari aplikasi ini masih tidak bagus. Jadi pada pertemuan ini, kita akan coba memperbaiki tampilan aplikasinya dalam bentuk android.


  • Menerapkan Kode
Buka lib/src/features/home/view/home_screen.dart, yang berisi hal berikut:
File ini mengimpor material.dart dan menerapkan widget stateful menggunakan dua class:
    • Pernyataan import akan menyediakan Komponen Material.
    • Class HomeScreen merepresentasikan seluruh halaman yang ditampilkan.
    • Metode build() class _HomeScreenState akan membuat root hierarki widget, yang memengaruhi cara pembuatan semua widget di UI.
  • Memanfaatkan Tofografi
Kemudian kita akan mengganti simbol NavigationRail untuk ke page-page selanjutnya (Home, Playlists, Artists):
                
lib/src/shared/router.dart
  • Menetapkan Tema
Untuk memilih warna sumber aplikasi, buka Material Theme Builder dan coba berbagai warna untuk UI aplikasi kita. Setelah kita mengetahui nilai hex warna primer ke penyedia tema, kemudian ThemeProvider akan menghasilkan ThemeData yang berisi kumpulan warna pelengkap yang Anda lihat di Builder Tema Material:
Selain itu, Pengguna dapat menyesuaikan kecerahan aplikasi di setelan sistem perangkat. Di lib/src/shared/app.dart, jika perangkat disetel ke mode gelap, tampilkan tema gelap dan mode tema ke MaterialApp
  • Menambah Desain Adaptif
Agar aplikasi Anda responsif, perkenalkan beberapa titik henti sementara adaptif (jangan samakan dengan titik henti sementara proses debug). Titik henti sementara ini menentukan ukuran layar tempat aplikasi akan mengubah tata letak. Layar yang lebih kecil tidak dapat menampilkan layar yang lebih besar tanpa mengecilkan konten. Agar aplikasi tidak terlihat seperti aplikasi desktop yang dikecilkan, buat tata letak terpisah untuk perangkat seluler yang menggunakan tab untuk membagi konten. Hal ini membuat aplikasi bersifat lebih native di perangkat seluler.

Metode ekstensi berikut dapat ditemukan di lib/src/shared/extensions.dart, merupakan tempat yang tepat untuk memulai saat mendesain tata letak yang dioptimalkan untuk berbagai perangkat target.
  • Menambah Gerak dan Animasi
ThemeProvider menentukan PageTransitionsTheme dengan animasi transisi layar untuk platform seluler (iOS, Android). Pengguna desktop sudah mendapatkan masukan dari klik mouse atau trackpad, sehingga animasi transisi halaman tidak diperlukan.

Flutter menyediakan animasi transisi layar yang dapat dikonfigurasikan untuk aplikasi berdasarkan platform target seperti yang terlihat di lib/src/shared/providers/theme.dart:
Teruskan PageTransitionsTheme ke tema terang dan gelap pada lib/src/shared/providers/theme.dart

Hasil :
  • Windows




  • Android






Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 11 - Pemrograman Perangkat Bergerak

-
Gambar
Hesekiel Nainggolan 5025201054 PPB I UNSCRAMBLE WORDS Pada pertemuan kali ini, kita akan mencoba membuat aplikasi Unscramble Words.  Aplikasi Unscramble adalah game pengacak ejaan kata untuk satu pemain. Aplikasi menampilkan kata acak, dan pemain harus menebak kata tersebut menggunakan semua huruf yang ditampilkan. Pemain akan mendapatkan poin jika kata tersebut benar. Jika tidak, pemain dapat mencoba menebak kata sebanyak-banyaknya. Aplikasi ini juga memiliki opsi untuk melewati kata saat ini. Di pojok kanan atas, aplikasi menampilkan jumlah kata, yaitu jumlah kata acak yang dimainkan dalam game saat ini. Ada 10 kata acak per game. Kita dapat menggunakan sumber code dari  Github . Tahapan awal dari aplikasi ini adalah Buka project dengan kode awal di Android Studio, Jalankan aplikasi di perangkat Android atau di emulator, dan Ketuk tombol Submit dan Skip untuk menguji aplikasi. Panduan Kode WordsData.kt  :  File ini berisi daftar kata yang digunakan dalam game, kons...
Baca selengkapnya

Tugas 12 - Pemrograman Perangkat Bergerak

-
Gambar
 Hesekiel Nainggolan 5025201054 PPB I FRAMEWORK FLUTTER 1 -  NAMER Halo, pada pertemuan kali ini, kita akan membahas mengenai framework flutter.  Flutter adalah toolkit UI Google untuk membangun aplikasi untuk perangkat seluler, web, dan desktop dari codebase tunggal. Untuk implementasi kali ini, kita akan membuat aplikasi Namer.  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: Sebelum kita melakukan pembuatan aplikasinya, pertama sekali kita harus menyiapkan beberapa tools yang diperlukan: Visual Studio Code Android Studio Visual Studio Instalasi SDK flutter yang digunakan Untuk detail dari instalasi nya dapat menonton melalui halaman link  Youtobe . Selanjutnya, kita akan mulai membuat aplikas...
Baca selengkapnya