/pbp-flutter-lab

Weekly Flutter Assignments of Platform-Based Programming Course [CSGE602022] - Faculty of Computer Science Universitas Indonesia, Odd Semester 2022/2023

Primary LanguageDart

Tugas 7: Elemen Dasar Flutter

Ramya Nareswari W. (2106751606)

Jelaskan apa yang dimaksud dengan stateless widget dan stateful widget dan jelaskan perbedaan dari keduanya.

Stateless Widget adalah sebagai Widget yang tidak dapat dirubah. Contohnya adalah navigasi karena konten navigasi tidak ada perubahan secara berkala

Stateful widget adalah widget yang dapat berubah. Contohnya adalah tampilan yang berubah atau warna text yang berubah. Pada widget ini dapat diterapkan setState.

Sebutkan widget apa saja yang kamu pakai di proyek kali ini dan jelaskan fungsinya.

  1. Scaffold: membuat tampilan dasar material design pada keseluruhan aplikasi
  2. FloatingActionButton: membuat button floating yang dapat ditekan dan menjalankan fungsi
  3. TextStyle: melakukan styling pada text

Apa fungsi dari setState()? Jelaskan variabel apa saja yang dapat terdampak dengan fungsi tersebut.

setState() yang akan bertugas untuk memberi tanda pada widget bahwa ada state yang berubah, yaitu dalam hal ini variabel _counter yang setiap kali tombol decrementCounter atau incrementCounter ditekan, maka nilai berubah.

Jelaskan perbedaan antara const dengan final.

Const tidak dapat diterapkan pada deklarasi sebuah variabel jika valuenya tidak diketahui saat compile, sedangkan final bisa diterapkan pada deklarasi variabel (baik yang nilainya sudah diketahui maupun belum) pada saat waktu kompilasi berjalan.

Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas.

  1. Melakukan perintah flutter create app dan flutter run
  2. Menambahkan widget Padding dan FloatingActionButton agar dapat diletakkan di kiri bawah dan kanan bawah.
  3. Menambah variabel _counter dan useState untuk increment dan decrement
  4. Melakukan styling untuk tulisan ganjil/genap
  5. Menerapkan bonus dengan menerapkan if-else operator dan menambahkan remove pada button

Tugas 8: Flutter Form

Jelaskan perbedaan Navigator.push dan Navigator.pushReplacement

Navigator.push berfungsi untuk melakukan push sebuah routing (halaman) ke top of stack navigation. Navigator.pushReplacement berfungsi untuk mereplace route yang sedang ditampilkan.

Sebutkan widget apa saja yang kamu pakai di proyek kali ini dan jelaskan fungsinya.

  1. Drawer = membuat menu pada sisi kiri aplikasi sebagainavigasi
  2. ListViewBuilder = menampilkan data dari form (dengan kata lain menampilkan widget children)
  3. ListTile = menampilkan pilihan pada drawer
  4. TextFormField = menerima input teks
  5. Icon = widget untuk menampilkan ikon
  6. DropdownButton = menampilkan pilihan input

Sebutkan jenis-jenis event yang ada pada Flutter (contoh: onPressed)

onSaved, onHover, onPressed, dan onTap.

Jelaskan bagaimana cara kerja Navigator dalam "mengganti" halaman dari aplikasi Flutter.

Halaman dikenal dengan istilah routes pada Flutter. Ketika berpindah page/routes, navigasi akan menjadi tumpukan (stack). Jadi ketika berpindah ke screen lain (push), maka screen pertama akan ditumpuk oleh screen kedua. Kemudian apabila kembali dari screen kedua ke pertama, maka screen kedua akan dihapus (pop)

Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas.

  1. Membuat page untuk form pada tambah.dart. Form berisi input yang menerima judul budget (string), nominal budget (int), jenisBudget (string) dengan pilihan pemasukan atau pengeluaran, dan tanggal dalma bentuk date picker.
  2. Menampilkan data dari submisi form dengan ListView builder
  3. Membuat drawer dengan code sebagai berikut
drawer: Drawer(
        child: Column(
          children: [
            // Menambahkan clickable menu
            ListTile(
              title: const Text('counter_7'),
              onTap: () {
                // Route menu ke halaman utama
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => const MyHomePage()),
                );
              },
            ),
            ListTile(
              title: const Text('Tambah Budget'),
              onTap: () {
                // Route menu ke halaman form
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => const FormPage()),
                );
              },
            ),
            ListTile(
              title: const Text('Data Budget'),
              onTap: () {
                // Route menu ke halaman data
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => const BudgetDataPage()),
                );
              },
            ),
          ],
        ),
      ),

Tugas 9: Integrasi Web Service pada Flutter

Apakah bisa kita melakukan pengambilan data JSON tanpa membuat model terlebih dahulu? Jika iya, apakah hal tersebut lebih baik daripada membuat model sebelum melakukan pengambilan data JSON?

Bisa, tetapi lebih baik menggunakan model. Jika tidak membuat model terlebih dahulu, ada beberapa kekurangan yaitu proses pengambilan data lebih rumit, eror lebih sulit dideteksi (jika memakai model, semua data akan divalidasi), dan sulit untuk menetapkan struktur dari data yang diambil.

Sebutkan widget apa saja yang kamu pakai di proyek kali ini dan jelaskan fungsinya.

Widget Fungsi
Drawer membuat menu pada sisi kiri aplikasi sebagainavigasi
Icon menampilkan ikon
Padding mengatur jarak antar child
SizedBox membuat jarak antar widget
ListTile menampilkan pilihan pada drawer dalam bentuk list
Text menampilkan text
Scaffold membuat layout pada aplikasi

Jelaskan mekanisme pengambilan data dari JSON hingga dapat ditampilkan pada Flutter.

Dengan memanfaatkan HTTP package pada flutter, HTTP akan fetch data dari API endpoint yang sudah dibuat. Lalu, terdapat function pada library dart:convert, yaitu json.decode() untuk build objek Dart dari data JSON dan json.encode() untuk serialize objek Dart menjadi string JSON. Selanjutnya, untuk melakukan request HTTP GET, URI dari resource harus diimplement pada code. Setelah HTTP request berhasil dihandle dan data berhasil difetch, json.decode

Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas.

  1. Pendefinisian model
    Mendefinisikan model yang digunakan ketika melakukan pemanggilan web service. Caranya menambahkan class bernama MyWatchList pada ..\lib/model/watchlistmodel.dart. MyWatchList adalah suatu model yang merepresentasikan response dari pemanggilan web service.

  2. Menambah dependensi HTTP
    Menambahkan dependensi HTTP dengan cd ke aplikasi lalu melakukan perintah flutter pub add http, lalu menambahkan snippet code <uses-permission android:name="android.permission.INTERNET" /> pada android/app/src/main/AndroidManifest.xml

  3. Mengambil dan mengolah data dari web service
    Pertama, tambahkan impor yang dibutuhkan pada ..\lib\services\fetchwatchlist.dart, lalu masukkan potongan code yang ditambahkan untuk fetch data dari endpoint JSON di Django yang telah dideploy

  4. Menambahkan tombol navigasi ke arah page My Watch List pada drawer
    Tambahkan code sebagai berikut pada drawer.dart

ListTile(
    title: const Text('My Watch List'),
    onTap: () {
      // Route menu ke halaman data
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const WatchListPage()),
      );
    },
  ),
  1. Menambahkan halaman detail untuk My Watch List
    Pada ..\lib\screens\mywatchlist_detail.dart, tambahkan tombol untuk back sebagai berikut:
CircleAvatar(
    backgroundColor: Colors.grey,
    child: IconButton(
      icon: const Icon(
        Icons.arrow_back,
        color: Colors.white,
      ),
      onPressed: () {
        Navigator.pop(context);
      },
    ),
  ),

Selanjutnya, tambahkan code untuk menampilkan data.

  1. Menambahkan halaman berisi data watchlist Pada ..\lib\screens\mywatchlist.dart, tambah code untuk menampilkan judul watchlist di setiap card

TODO: [x] pbp_django_auth [ ] import 'package:pbp_django_auth/pbp_django_auth.dart'; -> DITAROH WHERE?? https://pub.dev/packages/pbp_django_auth/install [x] Django's part udah di TUGAS-2-PBP bener gasih [ ] https://pub.dev/packages/pbp_django_auth -> BELOM BAGIAN FLUTTER PART