Tugas 8 PBB B

-

 Heru Dwi Kurniawan

5025211055

Pemrograman Perangkat Bergerak B


Tugas Flutter Framework


Aplikasi Flutter ini dirancang untuk memungkinkan pengguna menghasilkan nama-nama keren secara acak, seperti "newstay," "lightstream," "mainbrake," atau "graypine." Pengguna dapat dengan mudah meminta nama baru, menyimpan nama favorit mereka, dan mengelola daftar favorit dalam tampilan yang responsif dan sesuai untuk berbagai perangkat, dari ponsel hingga desktop. Aplikasi ini menawarkan navigasi yang intuitif sehingga pengguna dapat dengan lancar menikmati pengalaman interaktif dalam menciptakan dan menyimpan nama-nama menarik.


Mempersiapan Proyek Flutter


- Membuat Proyek Flutter Baru:

Gunakan perintah `flutter create nama_proyek` di terminal untuk membuat struktur dasar proyek Flutter. Langkah ini akan menghasilkan direktori proyek dengan file-file seperti `pubspec.yaml`, `android/` (atau `ios/`), dan `lib/`.


- Mengubah pubspec.yaml:

File `pubspec.yaml` merupakan file konfigurasi utama proyek Flutter. Di dalamnya, tambahkan dependensi seperti `english_words` dan `provider` dengan versi yang dibutuhkan. Kemudian, jalankan perintah `flutter pub get` di terminal untuk mengunduh dan menginstal paket-paket tersebut.


Struktur Proyek dan File Utama:

Pastikan struktur proyek diorganisir dengan rapi. File utama meliputi pubspec.yaml untuk konfigurasi, lib/main.dart sebagai titik masuk aplikasi, dan folder lib/ untuk menyimpan file-file Dart lainnya.

  1. File lib/main.dart:

    • Import Statements: Impor dependensi seperti english_words, flutter/material.dart, dan provider untuk menggunakan kelas-kelas dan fungsi-fungsi yang disediakan oleh paket-paket tersebut.
    • Main Function (void main()): Fungsi main() adalah titik awal aplikasi Flutter. Di dalamnya, panggil runApp() dengan widget MyApp untuk memulai aplikasi.
    • MyApp Class: Kelas MyApp adalah widget utama yang menggunakan ChangeNotifierProvider dari paket provider untuk manajemen state global. Kelas ini menentukan tema aplikasi dan halaman utama (MyHomePage).
    • MyAppState Class: Kelas MyAppState adalah model state aplikasi yang mengelola data seperti kata acak saat ini dan daftar favorit menggunakan ChangeNotifier.
    • MyHomePage Class: Widget MyHomePage menampilkan NavigationRail untuk navigasi antara GeneratorPage dan FavoritesPage, memberi pengguna cara yang mudah untuk beralih antara fungsi aplikasi.

  2. Implementasi Widget Tambahan:

    • GeneratorPage Class: Halaman ini menampilkan kata acak dan mengelola interaksi pengguna seperti menambah favorit. Halaman ini menggunakan state dari MyAppState.
    • BigCard Class: Bagian dari GeneratorPage yang menampilkan kata acak dalam kartu besar, menciptakan antarmuka yang menarik bagi pengguna.
    • FavoritesPage Class: Halaman ini menampilkan daftar nama favorit dalam ListView, memungkinkan pengguna untuk melihat dan mengelola nama-nama yang disimpan.

Menjalankan Aplikasi Flutter

  1. Menyiapkan Lingkungan Flutter:

Pastikan Flutter SDK sudah terpasang dan emulator atau perangkat fisik terhubung dengan benar untuk pengembangan Flutter.

  1. Langkah-langkah untuk Menjalankan Aplikasi:

    • Navigasi ke Direktori Proyek: Buka terminal atau command prompt, lalu arahkan ke direktori proyek Flutter yang sudah dibuat.
    • Instalasi Dependensi: Jalankan perintah flutter pub get di terminal untuk mengunduh dan menginstal semua dependensi yang dibutuhkan proyek.
    • Menjalankan Aplikasi: Gunakan perintah flutter run di terminal untuk membangun dan menjalankan aplikasi Flutter. Proses ini akan memulai aplikasi di emulator atau perangkat yang terhubung.



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.blueGrey),
        ),
        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 index $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 = appState.favorites.contains(pair)
        ? Icons.favorite
        : 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),
          ),
      ],
    );
  }
}

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Apsi 1 ( APSI E )

-
Gambar
                TUGAS APSI 1 SISTEM INFORMASI                            Nama : Heru Dwi Kurniawan        Kelas : APSI E        NRP : 5025211055          1.    Deskripsikan sistem informasi Sistem informasi adalah seperangkat komponen yang terintegrasi untuk mengumpulkan, menyimpan, dan memproses data dan untuk menyediakan informasi, pengetahuan, dan produk digital atau sebuah sistem yang menyediakan informasi untuk manajemen dalam mengambil keputusan dan juga untuk melaksanakan operasional perusahaan, di mana sistem tersebut merupakan sekumpulan dari orang-orang, teknologi informasi dan prosedur-prosedur yang tergorganisir secara tepat.  a. Analisis Aset Tetap Sebelum ke pembahasan mengenai pengertian Aset Tetap, alangkah baiknya menonton video pembahasan mengenai materi Sistem Akuntansi Analisi...
Baca selengkapnya

Tugas 1 - PBB B

-
Nama       : Heru Dwi Kurniawan NRP         : 5025211055 Kelas       : PBB B Tugas 1 PBB  Redeign Aplikasi Mobile  Redesain E-wallet OVO merupakan langkah revolusioner yang menggabungkan kepraktisan dengan antarmuka yang modern dan menarik. Dengan tampilan yang bersih dan responsif, pengguna akan merasakan pengalaman yang lebih menyenangkan dan mudah dalam mengelola keuangan digital mereka. Antarmuka Utama: 1. Desain Minimalis dan Bersih: E-wallet OVO yang baru memiliki tata letak yang sederhana namun elegan, memastikan pengalaman pengguna yang intuitif dan mudah dipahami. 2. Warna yang Menyenangkan: Palet warna yang diperbarui menciptakan atmosfer yang positif dan energik, menampilkan kombinasi warna yang cerah namun lembut sehingga menciptakan daya tarik visual yang kuat. 3. Ikon Modern dan Konsisten: Ikon-ikon yang dirancang ulang memiliki gaya modern yang konsisten, membantu pengguna mengidentifikasi fungsi dan fitur dengan...
Baca selengkapnya

Tugas 2

-
Gambar
 Nama      : Heru Dwi Kurniawan NRP         : 5025211055 KELAS      : PPB B Android Studio Happy Birthday App Deskripsi App "Happy Birthday App" adalah sebuah aplikasi mobile yang memungkinkan pengguna untuk merayakan ulang tahun teman, keluarga, atau orang yang mereka cintai dengan cara yang istimewa. Dengan antarmuka yang ramah pengguna dan fitur-fitur yang menyenangkan, pengguna dapat mengirimkan ucapan ulang tahun yang personal dan unik, seperti kartu ucapan digital yang dapat disesuaikan dengan gambar, teks, dan efek suara. Aplikasi ini juga menyediakan fitur untuk membuat daftar keinginan atau tugas spesial untuk hari ulang tahun yang bisa dibagikan dengan teman atau keluarga. Dengan "Happy Birthday App", momen spesial ulang tahun menjadi lebih berkesan dan menyenangkan. package com.example.happybirthdayappnadya import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent...
Baca selengkapnya