Laporan Praktikum

17 September 2025 ~ Oleh Kevin Andhika

Setup Flutter Development, Stateless & Statefull Widget, Basic Widgets

1. Tujuan

Tujuan praktikum ini yaitu pengguna mampu menginstall lingkungan flutter development, stateless dan statefull widget dan basic widgets flutter :

  • Pengguna mampu menyiapkan lingkungan development flutter seperti install sdk-flutter, git, android SDK, IDE dll
  • Pengguna mampu membuat stateless dan statefull widget flutter
  • Pengguna mampu membuat contoh basic widgets flutter

2. Alat yang Digunakan

  • IDE (Visual Studio Code)
  • Laptop yang sudah terinstal GIT

3. Langkah-langkah

A. Instalasi Lingkungan Flutter

  • Install Visual Studio lewat link berikut Visual Studio kemudian pada proses instalasinya centang pada bagian Desktop development with C++
    • Instalasi
  • Install Android Studio lewat link berikut Android Studio
    • Instalasi
  • Install SDK-Flutter lewat link berikut SDK-Flutter
    • Instalasi
    • Ekstrak hasil download tadi ke direktori yang diinginkan misalnya C:\Users\Kevin Andhika\flutter-sdk
    • Tambahkan path (ditambah dengan \bin) ke Environment control panel
      • Instalasi
  • Cek setup flutter development dengan mengetikkan perintah flutter doctor di dalam command prompt (disini instalasi android studio belum selesai sepenuhnya)
    • Instalasi

B. Project Command Prompt

  • Buka command prompt lalu ketikkan perintah flutter create hai untuk membuat project flutter bernama hai
    • cmd
  • Masuk ke dalam project yang dibuat tadi dengan cd hai lalu jalankan project dengan flutter run dan memilih dijalankan lewat Chrome
    • cmd

C. Project Visual Studio Code

  • Buka aplikasi visual studio code, pastikan ekstensi Flutter sudah ada di Visual Studio Code tersebut
    • vsc
  • Buat project bernama hai dengan cara membuka command pallete dengan shortcut ctrl+shift+p lalu ketik Flutter: New Project > Application
    • vsc

      Stateless & Statefull
    • Stateless - widget yang data atau tampilannya tidak mengalami perubahan ketika sebuah state dijalankan, Widget ini bersifat statis atau tetap misalnya teks statis, logo aplikasi dll
      • vsc
    • Statefull - 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.
      • vsc

      Basic Widget
    • Text - widget dasar yang digunakan untuk menampikan teks pada layer
      • vsc
    • Container - widget yang berfungsi sebagai KOTAK yang dapat menampung satu widget child dan menyediakan berbagai properti untuk dekorasi, mengatur posisi dan mengatur ukuran widget.
      • vsc
    • ElevatedButton - widget yang mewakili tombol dan memiliki shadow
      • vsc
    • Icon - widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon seperti Material Icons dari Google atau Cupertino Icons dari Apple
      • vsc
    • Image NetworkImage - widget dasar yang digunakan untuk menampikan gambar dari jaringan internet
      • vsc
    • Untuk AssetsImage buatkan baris tambahan di dalam file pubspec.yaml menjadi seperti berikut, dan juga tambahkan folder assets/image lalu upload foto yang ingin digunakan di dalam folder image
      • vsc vsc
    • Image AssetsImage - widget dasar yang digunakan untuk menampikan gambar dari file memori komputer
      • vsc
    • CircleAvatar - widget yang sering digunakan untuk menampilkan gambar profil pengguna atau inisialnya dalam bentuk lingkaran.
      • vsc

Kesimpulan

Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa pengembangan aplikasi mobile dengan Flutter memerlukan persiapan lingkungan development yang komprehensif meliputi instalasi SDK Flutter, Android Studio, dan Visual Studio Code, serta pemahaman mendalam tentang konsep stateless dan stateful widget sebagai fondasi pembangunan UI dinamis, dimana penguasaan berbagai basic widget seperti Text, Container, ElevatedButton, Icon, dan Image memungkinkan pembuatan antarmuka yang fungsional dan estetis baik dalam bentuk layout vertikal, horizontal, maupun halaman profil yang kompleks.


Latihan

  • Buatlah tampilan widget secara vertical dan horizontal dengan menggunakan minimal 3 buah basic widget dalam 1 tampilan.

    > Berikut kode tampilan widget vertikal dan horizontal (min 3 elemen tiap tampilan)

    latihan

    Kode ini menampilkan 6 buah widget (3 horizontal, 2 vertikal) yang tiap widgetnya berisi icon dan teks

    • MaterialApp: Aplikasi dasar dengan desain Material (style Google)
    • Scaffold: Kerangka halaman dengan latar belakang putih
    • Center: Semua konten ditempatkan di tengah layar
    latihan
  • Buatlah tampilan yang berisi informasi profile kalian (foto, nama, nim, Alamat, nomor handphone, jurusan) dengan mengimplementasikan seluruh basic widget yang ada pada modul praktikum ini.

    > Berikut kode tampilan profile mahasiswa (mengimplementasikan seluruh elemen yang dibahas sebelumnya)

    latihan

    Kode ini menampilkan laman profile mahasiswa yang berisi:

    • Logo universitas : NetworkImage
    • Foto profil : AssetsImage
    • Foto profile & icon sosmed : CircleAvatar
    • Teks nama : Text
    • Tabel profile : Widget/Container
    • Logo sosmed : Icon
    • Tombol terima kasih : ElevatedButton
    latihan