Praktikum June 17, 2025 · By Rahul

Laporan Praktikum 2:Setup Flutter Development, Stateless & Statefull Widget, Basic Widgets

1. Tujuan

Tujuan praktikum ini adalah agar mahasiswa mampu:

  • Menyiapkan lingkungan development Flutter (install SDK, Git, Android SDK, IDE, dll).
  • Membuat Stateless Widget dan Stateful Widget.
  • Membuat contoh penggunaan basic widget Flutter.

2. Alat

Perangkat yang digunakan adalah komputer/laptop yang telah diinstal Flutter SDK, Android Studio, Visual Studio Code, dan Git.

3. Teori

Flutter adalah framework open source untuk membangun aplikasi multiplatform dengan bahasa Dart. Flutter menyediakan widget statis (Stateless) dan dinamis (Stateful) serta beragam basic widget seperti Text, Container, ElevatedButton, Icon, Image, dan CircleAvatar.

4. Langkah-langkah

a. Setup Lingkungan

- Install Git, Visual Studio (dengan Desktop development C++), Android Studio, dan Visual Studio Code.
- Download dan extract Flutter SDK, kemudian tambahkan ke PATH.
- Jalankan perintah flutter doctor untuk memastikan setup berhasil.

b. Membuat Project Pertama

Project pertama dibuat dengan perintah terminal:
flutter create hai
cd hai
flutter run

Bisa juga melalui Visual Studio Code dengan Command Palette → Flutter: New Project. Struktur project Flutter terdiri dari folder lib/, android/, ios/, assets/, test/, serta file pubspec.yaml.

c. Stateless Widget

Stateless Widget adalah widget statis yang tidak berubah. Contoh kode:
Output berupa tampilan teks statis di layar.

d. Stateful Widget

Stateful Widget adalah widget dinamis yang bisa berubah saat ada event atau state berubah. Contoh kode:
Output menampilkan angka kelipatan 2 yang bertambah saat tombol ditekan.

e. Basic Widgets

Berikut beberapa basic widget yang dicoba:

  • Text → menampilkan teks dengan style.
  • Container → kotak dengan ukuran, warna, padding, margin.
  • ElevatedButton → tombol dengan style dan aksi.
  • Icon → menampilkan ikon material atau cupertino.
  • Image → menampilkan gambar dari network atau asset.
  • CircleAvatar → avatar bulat untuk foto profil atau inisial.

5. Latihan / Tugas

a. Membuat tampilan widget secara vertical dan horizontal dengan minimal 3 widget.



b. Membuat tampilan profil mahasiswa berisi foto, nama, NIM, alamat, nomor HP, dan jurusan dengan basic widget.



6. Kesimpulan

Pada praktikum ini mahasiswa berhasil melakukan instalasi lingkungan Flutter, membuat project pertama, memahami perbedaan Stateless dan Stateful widget, serta mengimplementasikan berbagai basic widget Flutter dalam bentuk tampilan sederhana dan latihan aplikasi profil.

Tags: #Flutter #Dart #Praktikum