Catatan Praktikum PAB Pertemuan Pertama

Pengenalan Flutter

• Flutter: Toolkit milik Google untuk pengembangan aplikasi mobile yang dapat berjalan di Android dan iOS.
• Bahasa Pemrograman: Menggunakan bahasa Dart.

Persiapan

• Instalasi:
  • Visual Studio Code atau Android Studio.
  • Flutter SDK.
• Emulator: Dapat menggunakan HP atau emulator dari Android Studio.

Membuat Proyek Baru

• Buka VS Code dan buat proyek baru:
  • Tekan Ctrl + Shift + P dan cari Flutter: New Project.
  • Buat folder dengan nama pertemuan_satu dan berikan nama proyek (contoh: flutter_pertemuan_satu).
• Proyek siap setelah menunggu beberapa saat.

Struktur Proyek

• Struktur folder:
  • lib: Tempat untuk coding dan tampilan front end.
  • android: Pengaturan untuk upload ke Google Play.
  • ios: Dapat dijalankan di Mac untuk pengembangan iOS.
  • web: Pengembangan aplikasi web juga memungkinkan di Flutter.

Menambahkan Dependency

• Untuk menambahkan package, cari di pub.dev:
  • Salin perintah instalasi ke dalam terminal.
  • Contoh: flutter pub add <package_name>.

Widget Dasar

• Stateless vs Stateful:
  • Stateless Widget: Tidak dapat diubah setelah dibangun.
  • Stateful Widget: Dapat mengubah state (contoh: counter yang bertambah).

Contoh Penggunaan Stateful Widget

• Membuat counter dengan fungsi increment.
• Menampilkan perubahan hitungan saat tombol ditekan.

Tampilan Dasar

• Menggunakan Scaffold untuk tampilan dasar aplikasi:
  • Menambahkan AppBar, Body, FloatingActionButton.

Menampilkan Gambar

• Menggunakan widget Image:
  • Dari URL: Image.network('<image_url>')
  • Dari aset: Menambahkan ke pubspec.yaml dan memanggilnya dengan Image.asset('path/to/image').

Navigasi

• Navigasi Push: Pindah ke halaman baru dengan menjaga halaman sebelumnya dalam stack.
• Navigasi Pop: Kembali ke halaman sebelumnya.
• Navigasi Replacement: Mengganti halaman saat pindah, sehingga tidak ada kembali ke halaman sebelumnya.

Membuat Button

• Menggunakan ElevatedButton atau GestureDetector untuk aksi di kontainer.
  • OnTap untuk menangani klik pada button atau komponen lainnya.

Validasi dan Perubahan State

• Menggunakan setState untuk mengubah tampilan sesuai dengan interaksi pengguna (misal: mengganti warna button).

Penutup

• Pertemuan ini memberikan dasar penggunaan Flutter, termasuk pembuatan widget, pengaturan proyek, dan navigasi.
• Mohon untuk praktik lebih lanjut dan eksplorasi lebih dalam tentang Flutter.