Tugas 9 - Pemrograman Perangkat Bergerak (B)

Nama      : Yusna Millaturrosyidah

NRP        : 5025211254

Kelas      : Pemrograman Perangkat Bergerak (B)

Framework Flutter

Deskripsi Aplikasi

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

Implementasi Aplikasi 

  1. Persiapan Proyek Flutter
    • Buat 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/.
    • Ubah pubspec.yaml: File pubspec.yaml adalah file konfigurasi proyek Flutter yang mendefinisikan metadata proyek, dependensi, serta sumber daya seperti font dan gambar. Di sini, 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.
  2. Struktur Proyek dan File Utama

    • 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 yang lainnya.

    • 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:

      • GeneratorPage Class: Di kelas ini, atur 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.
      • 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.
      • 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.

  3. Menjalankan Aplikasi

    • Setup Flutter Environment:

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

    • Menjalankan Aplikasi:

      • Setelah struktur proyek dan kode diatur dengan baik, buka terminal atau command prompt, dan arahkan ke direktori proyek Flutter.

    • Menginstal Dependensi:

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

    • 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.
        4. Uji Aplikasi

    • Uji Fungsionalitas:

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

    • 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.
          5. Pengembangan Lebih Lanjut

    • Modifikasi dan Peningkatan:

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

    • 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.

Berikut merupakan implementasinya : 

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),
          ),
      ],
    );
  }
}

Berikut adalah Hasil dari implementasi :






Komentar

Posting Komentar

Postingan Populer