Kembali ke Beranda

Modul Praktikum Aplikasi Mobile 2

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

1.1 Tujuan

  • Menyiapkan lingkungan Flutter Development (SDK, Git, Android SDK, IDE)
  • Membuat Stateless dan Stateful Widget Flutter
  • Membuat contoh Basic Widgets Flutter

1.2 Alat

  • Komputer/Laptop yang telah terinstall Flutter Development

1.3 Teori

Pada praktikum ini mahasiswa belajar dasar-dasar Flutter, perbedaan Stateless Widget (statis, tidak berubah) dan Stateful Widget (dinamis, dapat berubah), serta penggunaan Basic Widgets seperti Text, Container, ElevatedButton, Icon, Image, dan CircleAvatar.

1.4 Langkah-langkah

Setup Lingkungan Flutter Development

Beberapa langkah utama setup:

  • Install Git
  • Install Visual Studio (centang Desktop development with C++)
  • Install Android Studio + SDK Tools
  • Install Visual Studio Code + Extension Flutter
  • Download & extract Flutter SDK, tambahkan ke PATH
  • Cek instalasi dengan flutter doctor

Project Pertama Flutter

flutter create hai
cd hai
flutter run

Stateless Widget

Stateless Widget merupakan widget yang data atau tampilannya tidak mengalami perubahan ketik
sebuah state dijalankan, Widget ini bersifat statis atau tetap misalnya teks statis, logo aplikasi dll

Output

Stateful Widget

Statefull Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga
berubah. contohnya ketika tombol diklik atau ditekan maka tombol berubah warna atau form input
nilainya berubah.

Output

Basic Widgets

Text

Text merupakan widget dasar yang digunakan untuk menampikan teks pada layer

Output

Container

Container merupakan widget yang berfungsi sebagai KOTAK yang dapat menampung ssatu widget
child dan menyediakan berbagai properti untuk dekorasi, mengatur posisi dan mengatur ukuran
widget.

Output

ElevatedButton

ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow

Output

Icon

Icon merupakan widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon
seperti Material Icons dari Google atau Cupertino Icons dari Apple

Output

Image (network & asset)

Image merupakan widget dasar yang digunakan untuk menampikan gambar dari berbagai sumber
seperti asset, network, memory (byte data), file system.

Output

Output

CircleAvatar

CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil pengguna atau
inisialnya dalam bentuk lingkaran

1.5 Latihan / Tugas

  • Buat tampilan widget secara vertikal dan horizontal dengan minimal 3 basic widget.

    Output

  • Buat tampilan profil berisi foto, nama, NIM, alamat, nomor HP, jurusan dengan mengimplementasikan seluruh basic widget.

    Output