Tugas 9 PPB - B

Nama : Tsabita Putri Ramadhany

NRP : 5025211130

Kelas : PPB - B

Tugas 9

Framework Flutter

Tugas : Menerapkan Framework Flutter

Petunjuk Tugas : https://kuliahppb.blogspot.com/2024/06/framework-flutter-1.html

Flutter adalah SDK aplikasi Mobile dari Google yang digunakan untuk membangun aplikasi native iOS, Android, Desktop (Windows, Linux, macOS), dan Web dari satu source code. Saat membangun aplikasi dengan Flutter, semuanya berkaitan dengan Widgets, yaitu sebuah blok yang digunakan untuk membangun aplikasi Flutter. Widget merupakan elemen struktural yang dilengkapi dengan banyak fungsi khusus untuk material design, dan widget baru dapat digunakan dengan cara menyusun widget yang sudah ada. Proses menggabungkan widget disebut komposisi. Antarmuka pengguna aplikasi terdiri dari banyak widget sederhana yang memiliki tugasnya masing-masing. Itulah sebabnya mengapa pengembang Flutter cenderung memandang aplikasi Flutter mereka sebagai pohon widget.

Flutter adalah framework open source untuk membuat aplikasi mobile berkualitas tinggi dan performa tinggi pada sistem operasi mobile seperti Android dan iOS. Framework ini menyediakan SDK yang sederhana, efisien, dan mudah dipahami untuk membuat aplikasi mobile menggunakan bahasa pemrograman Dart milik Google. Tutorial ini membahas dasar-dasar framework Flutter, proses instalasi SDK Flutter, cara menyiapkan Android Studio untuk mengembangkan aplikasi berbasis Flutter, desain struktur Flutter, serta cara mengembangkan berbagai jenis aplikasi seluler menggunakan framework Flutter.

Karakteristik Flutter

• Dirilis pertama kali pada tahun 2017
• Berdasarkan bahasa pemrograman Dart
• Mengontrol setiap piksel di layar
• Cross-Platform ( Mobile, Web, Desktop )
• Developed by Google
• Kinerja aplikasi lebih tinggi. Flutter dapat menghasilkan animasi dengan kecepatan 60 fps atau 120 fps. Flutter sendiri dapat menggambar dan mengontrol setiap piksel di layar.
• Flutter adalah kerangka kerja yang paling cepat berkembang untuk pengembangan lintas platform. Dukungan komunitas untuk flutter sangat luar biasa, dengan lebih dari 11100 bintang di Github, 15000 fork, dan lebih dari 41000 masalah yang diselesaikan, Flutter memimpin industri ini

Deskripsi Aplikasi

Aplikasi Flutter ini memungkinkan pengguna untuk menghasilkan nama-nama unik secara acak, seperti "newstay", "lightstream", "mainbrake", atau "graypine". Pengguna dapat dengan mudah meminta nama baru, menyimpan nama yang mereka sukai ke dalam daftar favorit, dan meninjau daftar nama favorit mereka dalam tampilan yang responsif yang mendukung berbagai ukuran layar, mulai dari perangkat seluler hingga desktop. Aplikasi ini dirancang dengan navigasi intuitif, sehingga pengguna dapat menikmati pengalaman yang mulus dan interaktif dalam menciptakan dan mengelola nama-nama yang menarik.

Implementasi Aplikasi

Persiapan Proyek Flutter

1. Membuat Proyek Baru Flutter:

   • Saat memulai proyek Flutter baru, gunakan perintah flutter create nama_proyek di terminal untuk membuat struktur dasar proyek. Ini akan menciptakan direktori proyek dengan file-file dasar seperti pubspec.yaml, android/ (atau ios/), dan lib/.

2. Mengubah pubspec.yaml:

   • File pubspec.yaml adalah file konfigurasi proyek Flutter yang mendefinisikan metadata proyek, dependensi, serta sumber daya seperti font dan gambar. Tambahkan dependensi yang diperlukan seperti english_words dan provider dengan versi yang sesuai. Setelah menambahkan dependensi, jalankan flutter pub get di terminal untuk mengunduh dan menginstal paket-paket tersebut ke dalam proyek.

Struktur Proyek dan File Utama

1. Struktur Proyek:

   • Pastikan struktur proyek terorganisir dengan baik. File utama yang perlu ada antara lain pubspec.yaml untuk konfigurasi, lib/main.dart sebagai titik masuk aplikasi, dan folder lib/ untuk menyimpan file-file Dart lainnya.

2. File lib/main.dart:

   • Import Statements: Di dalam file lib/main.dart, impor dependensi yang diperlukan seperti english_words, flutter/material.dart, dan provider. Ini memungkinkan penggunaan kelas-kelas dan fungsi-fungsi yang didefinisikan dalam paket-paket tersebut di dalam kode aplikasi.
   • Main Function (void main()): Fungsi main() merupakan titik masuk utama aplikasi Flutter. Di dalamnya, panggil runApp() dengan menginstansiasi kelas MyApp. Ini memulai proses penggambaran UI dan manajemen state aplikasi.
   • MyApp Class: Kelas MyApp adalah widget utama yang menggunakan ChangeNotifierProvider dari paket provider untuk manajemen state global. Di sini, tentukan tema aplikasi dan sediakan titik masuk halaman utama (MyHomePage).
   • MyAppState Class: Kelas MyAppState adalah model state aplikasi yang mengelola data seperti kata acak saat ini dan daftar favorit. Gunakan ChangeNotifier dari provider untuk memberi tahu perubahan state ke widget-widget yang bergantung pada data ini.
   • MyHomePage Class: Widget MyHomePage adalah halaman utama yang menampilkan NavigationRail untuk navigasi antara halaman Generator (GeneratorPage) dan Favorites (FavoritesPage). Ini memberi pengguna cara untuk beralih di antara fungsi aplikasi dengan mudah.

Implementasi Widget Tambahan

1. GeneratorPage Class:

   • Kelas ini mengatur UI untuk menampilkan kata acak dan mengelola interaksi pengguna seperti menandai nama sebagai favorit atau meminta kata berikutnya. Gunakan state dari MyAppState untuk mengubah tampilan berdasarkan perubahan data.

2. BigCard Class:

   • Widget BigCard adalah bagian dari GeneratorPage yang menampilkan kata acak dalam kartu besar dengan gaya yang ditentukan oleh tema aplikasi. Ini membantu menciptakan antarmuka yang menarik dan responsif untuk pengguna.

3. FavoritesPage Class:

   • Halaman FavoritesPage menampilkan daftar nama yang telah ditandai sebagai favorit dalam ListView. Ini memungkinkan pengguna untuk melihat dan mengelola nama-nama yang disimpan dengan mudah.

Menjalankan Aplikasi

1. Setup Lingkungan Flutter:

   • Pastikan lingkungan pengembangan terinstal dengan Flutter SDK dan terhubung ke emulator atau perangkat fisik yang mendukung pengembangan Flutter.

2. Menginstal Dependensi:

   • Jalankan flutter pub get di terminal untuk memastikan semua dependensi yang dibutuhkan telah diunduh dan diinstal dengan benar dalam proyek.

3. Menjalankan Aplikasi:

   • Gunakan perintah flutter run di terminal untuk memulai aplikasi. Ini akan membangun aplikasi Anda dan memulai prosesnya di emulator atau perangkat yang terhubung.

Uji Aplikasi

1. Uji Fungsionalitas:

   • Setelah aplikasi berjalan, uji fungsionalitasnya dengan menghasilkan nama acak, menandai nama sebagai favorit, dan memverifikasi bahwa daftar favorit berfungsi dengan baik.

2. Responsivitas UI:

   • Pastikan aplikasi responsif terhadap berbagai ukuran layar. Uji pada mode landscape dan portrait untuk memastikan tata letak UI tetap konsisten dan nyaman digunakan.

Pengembangan Lebih Lanjut

1. Modifikasi dan Peningkatan:

   • Sesuaikan aplikasi sesuai kebutuhan dengan menambahkan fitur tambahan atau merancang ulang UI untuk meningkatkan pengalaman pengguna.

2. Optimasi Kode:

   • Selalu periksa dan optimalkan kode untuk meningkatkan performa dan memelihara keterbacaan. Gunakan prinsip-prinsip terbaik dalam pengelolaan state dan pembuatan UI di Flutter untuk menjaga kode tetap bersih dan mudah dikelola.

Dengan mengikuti setiap langkah ini secara teliti, dapat diimplementasikan aplikasi Flutter yang menghasilkan nama acak, memungkinkan pengguna untuk mengelola nama favorit, dan memberikan antarmuka pengguna yang responsif dan interaktif.

Contoh Implementasi

pubspec.yaml

name: namer_app
description: A new Flutter project.

publish_to: 'none' 

version: 0.0.1+1

environment:
  sdk: '>=2.19.4 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

  english_words: ^4.0.0
  provider: ^6.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

analysis_option.yaml

include: package:flutter_lints/flutter.yaml

linter:
  rules:
    prefer_const_constructors: false
    prefer_final_fields: false
    use_key_in_widget_constructors: false
    prefer_const_literals_to_create_immutables: false
    prefer_const_constructors_in_immutables: false
    avoid_print: false

lib/main.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }

  var favorites = <WordPair>[];

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    Widget page;
    switch (selectedIndex) {
      case 0:
        page = GeneratorPage();
        break;
      case 1:
        page = FavoritesPage();
        break;
      default:
        throw UnimplementedError('no widget for $selectedIndex');
    }

    return LayoutBuilder(
      builder: (context, constraints) {
        return Scaffold(
          body: Row(
            children: [
              SafeArea(
                child: NavigationRail(
                  extended: constraints.maxWidth >= 600,
                  destinations: [
                    NavigationRailDestination(
                      icon: Icon(Icons.home),
                      label: Text('Home'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.favorite),
                      label: Text('Favorites'),
                    ),
                  ],
                  selectedIndex: selectedIndex,
                  onDestinationSelected: (value) {
                    setState(() {
                      selectedIndex = value;
                    });
                  },
                ),
              ),
              Expanded(
                child: Container(
                  color: Theme.of(context).colorScheme.primaryContainer,
                  child: page,
                ),
              ),
            ],
          ),
        );
      }
    );
  }
}

class GeneratorPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          BigCard(pair: pair),
          SizedBox(height: 10),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  appState.toggleFavorite();
                },
                icon: Icon(icon),
                label: Text('Like'),
              ),
              SizedBox(width: 10),
              ElevatedButton(
                onPressed: () {
                  appState.getNext();
                },
                child: Text('Next'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class BigCard extends StatelessWidget {
  const BigCard({
    super.key,
    required this.pair,
  });

  final WordPair pair;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final style = theme.textTheme.displayMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      color: theme.colorScheme.primary,
      child: Padding(
        padding: const EdgeInsets.all(20.0),

        child: Text(
          pair.asLowerCase, 
          style: style,
          semanticsLabel: "${pair.first} ${pair.second}",
        ),
      ),
    );
  }
}

class FavoritesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    if (appState.favorites.isEmpty) {
      return Center(
        child: Text('No favorites yet.'),
      );
    }

    return ListView(
      children: [
        Padding(
          padding: const EdgeInsets.all(20),
          child: Text('You have '
              '${appState.favorites.length} favorites:'),
        ),
        for (var pair in appState.favorites)
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text(pair.asLowerCase),
          ),
      ],
    );
  }
}

Hasil Implementasi

Setelah semua langkah diikuti dan kode diimplementasikan dengan benar, hasil akhirnya adalah sebuah aplikasi Flutter yang memungkinkan pengguna untuk menghasilkan nama acak, menyimpan nama favorit, dan meninjau daftar favorit mereka dengan antarmuka yang responsif dan intuitif. Aplikasi ini dapat dijalankan di berbagai perangkat dengan berbagai ukuran layar, memastikan pengalaman pengguna yang konsisten dan menyenangkan.

Hasil Aplikasi:

Source code : GitHub