Tugas 11 PPB - B

Nama : Tsabita Putri Ramadhany

NRP : 5025211130

Kelas : PPB - B


Tugas 11

Flutter - Music Application


Tugas : Membuat Flutter - Music Application

Petunjuk Tugas : https://kuliahppb.blogspot.com/2024/06/flutter-music-application.html

                                        


Dalam materi ini kita akan membuat aplikasi MyArtist, yaitu sebuah aplikasi pemutar musik tempat penggemar dapat terus mengikuti kabar terbaru dari artis favoritnya. Di dalam aplikasi akan ditampilkan foto dan deskripsi artist, album lagu, dan juga komentar fans.

Pengembangan Aplikasi Musik Menggunakan Flutter

Pendahuluan

Pada pertemuan minggu ke-14 dalam mata kuliah Pemrograman Perangkat Bergerak, kami membahas studi kasus tentang pengembangan aplikasi perangkat lunak menggunakan Flutter, yakni aplikasi pemutar musik yang dikenal sebagai Music Application. Aplikasi ini dirancang untuk memungkinkan penggemar musik mengikuti kabar terbaru dari artis favorit mereka. Sebagai tugas latihan, kami diminta untuk memodifikasi desain aplikasi agar tampak baik di berbagai platform, baik itu desktop maupun perangkat seluler.

Persiapan Awal

Untuk mulai memodifikasi aplikasi ini, langkah pertama yang perlu dilakukan adalah mendownload proyek dari GitHub, mengunduh semua dependency yang diperlukan, dan menjalankan aplikasi tersebut. Berikut adalah tampilan awal dari Music Application saat pertama kali dijalankan:

Perbaikan dan Penyesuaian

Saat melihat tampilan aplikasi di atas, kita dapat melihat bahwa tampilannya cukup baik di desktop. Namun, untuk perangkat seluler, tampilannya kurang optimal. Berikut adalah beberapa modifikasi yang dilakukan untuk memperbaiki hal tersebut.

Typography

Modifikasi pertama adalah pada elemen NavigationRail di aplikasi awal yang memiliki tab untuk setiap rute utama, tetapi ikon utamanya identik. Ini kurang membantu karena pengguna tetap harus membaca teks di setiap tab. Kami memulai dengan menambahkan petunjuk visual sehingga pengguna dapat dengan cepat mengenali ikon utama untuk menemukan tab yang diinginkan.

Selanjutnya, kami memilih font yang tepat. Kami menggunakan Google Fonts dan memilih font Montserrat, karena aplikasi musik ini ditujukan untuk memberikan kesan menyenangkan dan ceria. Pemilihan font yang tepat meningkatkan estetika dan daya tarik visual aplikasi, memberikan pengalaman yang lebih baik bagi pengguna.

Tema

Tema membantu membawa desain yang terstruktur dan keseragaman pada sebuah aplikasi dengan menetapkan sistem warna dan gaya teks yang terstandarisasi. Dengan menggunakan tema, kita dapat dengan cepat mengimplementasikan antarmuka pengguna (UI) tanpa harus khawatir tentang detail kecil seperti menentukan warna yang tepat untuk setiap widget.

Kami mengimplementasikan tema menggunakan Material 3 UI yang 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.

Desain Adaptif

Dengan Flutter, kita dapat membangun aplikasi yang dapat berjalan di berbagai platform, 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. Untuk mengatasi ini, aplikasi harus dapat mengubah tampilan berdasarkan ukuran layar. Desain responsif memastikan aplikasi dapat berjalan di semua ukuran layar dengan menggunakan breakpoint yang 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, kami membuat tata letak terpisah untuk perangkat seluler dengan menggunakan tab untuk membagi konten. Ini memberikan aplikasi nuansa yang lebih alami pada perangkat seluler.

Ruang kosong adalah alat visual penting untuk aplikasi, 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 terlihat kurang terorganisir.

Dengan menerapkan desain adaptif, aplikasi menjadi lebih ramah pengguna, fungsional, dan estetis di berbagai perangkat dan ukuran layar.

Gerak dan Animasi

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. Misalnya, kita bisa mengatur transisi agar menggunakan animasi fade atau slide, yang membuat perpindahan antar halaman lebih halus dan menarik.

Contoh Implementasi Kode

Berikut adalah kode perubahan yang dilakukan pada aplikasi Music Application:

import 'package:flutter/material.dart';

class AdaptiveNavigation extends StatelessWidget {
  const AdaptiveNavigation({
    super.key,
    required this.destinations,
    required this.selectedIndex,
    required this.onDestinationSelected,
    required super.child,
  });

  final List<NavigationDestination> destinations;
  final int selectedIndex;
  final void Function(int index) onDestinationSelected;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, dimens) {
        // Tablet Layout
        if (dimens.maxWidth >= 600) { 
          return Scaffold(
            body: Row(
              children: [
                NavigationRail(
                  extended: dimens.maxWidth >= 800,
                  minExtendedWidth: 180,
                  destinations: destinations
                      .map((e) => NavigationRailDestination(
                            icon: e.icon,
                            label: Text(e.label),
                          ))
                      .toList(),
                  selectedIndex: selectedIndex,
                  onDestinationSelected: onDestinationSelected,
                ),
                Expanded(child: child),
              ],
            ),
          );
        }

        // Mobile Layout
        return Scaffold(
          body: child,
          bottomNavigationBar: NavigationBar(
            destinations: destinations,
            selectedIndex: selectedIndex,
            onDestinationSelected: onDestinationSelected,
          ),
        );
      },
    );
  }
}

class _MyAppState extends State<MyApp> {
  final settings = ValueNotifier(ThemeSettings(
    sourceColor: Color(0xff00cbe6),
    themeMode: ThemeMode.system,
  ));

  @override
  Widget build(BuildContext context) {
    return BlocProvider<PlaybackBloc>(
      create: (context) => PlaybackBloc(),
      child: DynamicColorBuilder(
        builder: (lightDynamic, darkDynamic) => ThemeProvider(
            lightDynamic: lightDynamic,
            darkDynamic: darkDynamic,
            settings: settings,
            child: NotificationListener<ThemeSettingChange>(
              onNotification: (notification) {
                settings.value = notification.settings;
                return true;
              },
              child: ValueListenableBuilder<ThemeSettings>(
                valueListenable: settings,
                builder: (context, value, _) {
                  final theme = ThemeProvider.of(context);
                  return MaterialApp.router(
                    debugShowCheckedModeBanner: false,
                    title: 'Flutter Demo',
                    theme: theme.light(settings.value.sourceColor),
                    darkTheme: theme.dark(settings.value.sourceColor),
                    themeMode: theme.themeMode(),
                    routeInformationParser: appRouter.routeInformationParser,
                    routeInformationProvider:
                        appRouter.routeInformationProvider,
                    routerDelegate: appRouter.routerDelegate,
                    builder: (context, child) {
                      return PlayPauseListener(child: child!);
                    },
                  );
                },
              ),
            )),
      ),
    );
  }
}

extension TypographyUtils on BuildContext {
  ThemeData get theme => Theme.of(this);
  TextTheme get textTheme => GoogleFonts.montserratTextTheme(theme.textTheme);
}

class _OutlinedCardState extends State<OutlinedCard> {
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: widget.clickable
          ? SystemMouseCursors.click
          : SystemMouseCursors.basic,
      child: Container(
        child: widget.child,
        decoration: BoxDecoration(
          border: Border.all(
            color: Theme.of(context).colorScheme.outline,
            width: 1,
          ),
        ),
      ),
    );
  }
}

HoverableSongPlayButton(
  hoverMode: HoverMode.overlay,
  song: playlist.songs[index],
  child: Center(
    child: Text(
      (index + 1).toString(),
      textAlign: TextAlign.center,
    ),
  ),
);

const List<NavigationDestination> destinations = [
  NavigationDestination(
    label: 'Home',
    icon: Icon(Icons.home),
    route: '/',
  ),
  NavigationDestination(
    label: 'Playlists',
    icon: Icon(Icons.playlist_add_check),
    route: '/playlists',
  ),
  NavigationDestination(
    label: 'Artists',
    icon: Icon(Icons.people),
    route: '/artists',
  ),
];

ThemeData light([Color? targetColor]) {
  final _colors = colors(Brightness.light, targetColor);
  return ThemeData.light().copyWith(
    pageTransitionsTheme: pageTransitionsTheme,
    colorScheme: ColorScheme.fromSeed(
      seedColor: source(targetColor),
      brightness: Brightness.light,
    ),
    appBarTheme: appBarTheme(_colors),
    cardTheme: cardTheme(),
    listTileTheme: listTileTheme(),
    tabBarTheme: tabBarTheme(_colors),
    scaffoldBackgroundColor: _colors.background,
  );
}

ThemeData dark([Color? targetColor]) {
  final _colors = colors(Brightness.dark, targetColor);
  return ThemeData.dark().copyWith(
    pageTransitionsTheme: pageTransitionsTheme,
    colorScheme: ColorScheme.fromSeed(
      seedColor: source(targetColor),
      brightness: Brightness.dark,
    ),
    appBarTheme: appBarTheme(_colors),
    cardTheme: cardTheme(),
    listTileTheme: listTileTheme(),
    tabBarTheme: tabBarTheme(_colors),
    scaffoldBackgroundColor: _colors.background,
  );
}

Hasil Implementasi

Setelah semua langkah diikuti dan kode diimplementasikan dengan benar, hasil akhirnya adalah sebuah aplikasi Flutter yang dapat dijalankan dengan baik di berbagai perangkat dan ukuran layar. Aplikasi ini memiliki tampilan yang estetis, responsif, dan ramah pengguna, baik di desktop maupun perangkat seluler.

Aplikasi ini sekarang lebih mudah dinavigasi, memiliki visual yang lebih menarik, dan memberikan pengalaman pengguna yang lebih baik berkat perubahan desain, tema, dan animasi yang diterapkan.

Dengan demikian, proses modifikasi ini telah berhasil meningkatkan kualitas dan kenyamanan penggunaan aplikasi Music Application, menjadikannya lebih adaptif dan modern.

Hasil Aplikasi:




Source code : GitHub








Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 PPL - A

Gambar
Nama  : Tsabita Putri Ramadhany NRP  : 5025211130 Kelas : PPL - A Tugas 1 Dokumen Perancangan Perangkat Lunak Judul : Sistem Online untuk Dokumen Perancangan Perangkat Lunak bagi Perusahaan atau Tim Pengembang Link : Dokumen A. Deskripsi Dokumen Dokumen tersebut diharapkan dapat membantu tim pengembang software dengan membuat Sistem Online Untuk Dokumen Perancangan Perangkat Lunak Bagi Perusahaan/Tim Pengembang berbasis web yang dapat digunakan tim pengembang software untuk berkolaborasi dalam membuat perancangan maupun dalam pembuatan suatu sistem. Sistem ini dapat menyimpan seluruh requirementsuatu software hingga rancangan seperti Data Flow Diagram (DFD), Use Case Diagram (UCD), Activity Diagram, dan lain lain. B. Perancangan Arsitektur 1. Kebutuhan Perangkat Lunak a. Browser yang digunakan adalah Google Chrome dan Mozilla Firefox. Untuk Google Chrome minimum versi 67.0.3396.99 atau lebih tinggi dan untuk Mozilla Firefox minimum versi 59.0.2 atau lebih tinggi. b. Untuk sist...
Baca selengkapnya

Tugas 1 PPB - B

Gambar
Nama  : Tsabita Putri Ramadhany NRP  : 5025211130 Kelas : PPB - B Tugas 1 Redesign Aplikasi Aplikasi : Flip 1. Deskripsi Kegunaan Aplikasi Flip adalah aplikasi keuangan digital yang dirancang untuk memfasilitasi berbagai jenis transaksi dengan fokus pada efisiensi biaya dan kenyamanan pengguna. Fitur utamanya adalah kemampuan untuk melakukan transfer antarbank tanpa biaya, mengatasi masalah biaya tinggi yang biasanya terkait dengan pengiriman uang antar bank yang berbeda. Fitur ini sangat berguna bagi individu dan bisnis yang sering melakukan transaksi dengan pihak di jaringan perbankan yang beragam. Selain transfer antarbank gratis, Flip juga menawarkan beberapa layanan keuangan lain yang memenuhi kebutuhan penggunanya. Layanan ini dapat mencakup pembayaran tagihan, seperti tagihan utilitas, kartu kredit, dan tagihan internet, memungkinkan pengguna untuk mengelola berbagai pembayaran dari satu platform secara efisien. Beberapa versi Flip juga mendukung pembelian pulsa dan pak...
Baca selengkapnya

Tugas 6 PPL - A

Gambar
Nama  : Tsabita Putri Ramadhany NRP  : 5025211130 Kelas : PPL - A Tugas 6 Studi Kasus Design System Tugas :  Zoom System Design Petunjuk Tugas :  https://kuliahppl.blogspot.com/2024/05/presentasi-studi-kasus.html Kelompok :  Tsabita Putri Ramadhany (5025211130) Yusna Millaturrosyidah (5025211254) Blog anggota lain : Blog Anggota Lain Zoom adalah platform komunikasi visual yang memungkinkan pengguna untuk melakukan pertemuan virtual, konferensi video, dan kolaborasi online. Dengan meningkatnya kebutuhan akan kerja jarak jauh dan komunikasi virtual, Zoom telah menjadi salah satu platform yang seringkali digunakan. Tujuan dari sistem desain Zoom adalah untuk menyediakan platform yang aman dan mudah digunakan bagi jutaan pengguna di seluruh dunia. Ini melibatkan membangun infrastruktur yang mampu menangani jumlah pengguna yang besar, menyediakan kualitas layanan yang tinggi, dan menjaga keamanan data pengguna. I. Functionally Requirements 1. One-to-one calling fea...
Baca selengkapnya