Praktikum 2: Flutter Development

Setup Flutter Development, Stateless & Stateful Widgets, Basic Widgets

PRAKTIKUM 2

Setup Flutter Development, Stateless & Stateful Widget, Basic Widgets

1.1 Tujuan

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

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

1.2 Alat

  • Computer/laptop yang telah terinstall flutter development.

1.3 Teori

Tidak ada teori pada bagian ini.

1.4 Langkah-langkah

Setup Lingkungan Flutter Development (Windows)
Install GIT

Langkah pertama adalah menginstall GIT.

Install Visual Studio

Ada library flutter yang membutuhkan Bahasa C++ maka perlu diinstall Visual Studio. Install Visual Studio kemudian centang pada Desktop development with C++.

Install Android Studio

Meskipun kita dapat membuat aplikasi flutter tanpa menggunakan Android Studio, akan tetapi sangat direkomendasikan untuk menginstallnya, karena pada Android Studio terdapat Android SDK Manager dan kita dapat membuat emulator untuk menjalankan aplikasi flutter.

Setelah selesai diinstall, buat project baru kemudian cari menu SDK Manager.

Pilih tab SDK Tools kemudian ceklis item-item seperti pada gambar berikut, lalu tunggu sampai proses download selesai.

Install Visual Studio Code

Install Visual Studio Code, lalu tambahkan ekstensi Flutter.

Install SDK Flutter

Download SDK Flutter versi stable, kemudian extract pada komputer Anda (misalkan pada direktori C:\Users\{username}\dev). Selanjutnya tambahkan path flutter ke environment variables.

Edit path dan tambahkan direktori hasil extract ke dalam path. Misalkan direktori extract adalah C:\Users\{username}\dev, maka tambahkan \bin di ujungnya menjadi C:\Users\{username}\dev\flutter\bin.

Cek Setup Flutter Development

Setelah mengikuti langkah-langkah di atas, selanjutnya kita pastikan apakah lingkungan flutter development siap untuk digunakan. Buka Command Prompt / PowerShell / Terminal kemudian ketikkan flutter doctor.

C:\Users\NURFIAH>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✔] Flutter (Channel stable, 3.22.0, on Microsoft Windows [Version 10.0.19045.6332], locale en-ID)
[✔] Windows Version (Installed version of Windows is version 10 or higher)
[✔] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[!] Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✔] Chrome - develop for the web
[✔] Visual Studio - develop for Windows apps (Visual Studio Community 2022 17.14.3)
[✔] Android Studio (version 2023.3)
[✔] VS Code (version 1.104.0)
[✔] Connected device (3 available)
[✔] Network resources

! Doctor found issues in 1 category.

Jika tidak ada tanda silang (error), maka kita siap untuk praktek membuat aplikasi menggunakan flutter.

Project Pertama Flutter "hai"

Membuat project flutter dapat dilakukan menggunakan beberapa cara yaitu dapat melalui Command Prompt / Terminal dan juga dapat dibuat langsung dari IDE yang kita gunakan.

Via Terminal/Command Prompt

Buka terminal / command prompt kemudian ketikkan flutter create hai.

C:\Users\NURFIAH>flutter create hai
Creating project hai...
Resolving dependencies in hai... (1.8s)
...
All done!

Masuk ke direktori cd hai dan ketikkan flutter run untuk menjalankan project. Akan muncul pilihan di mana project akan dijalankan (misalnya Windows, Chrome, atau Edge).

Via Visual Studio Code
  1. Buka Visual Studio Code.
  2. Buka Command Palette (Ctrl+Shift+P).
  3. Ketik Flutter: New Project.
  4. Pilih jenis proyek "Application".
  5. Pilih direktori dan masukkan nama proyek "hai".
Struktur Project Flutter
  • lib/: Berfungsi untuk menyimpan seluruh kode Dart. main.dart adalah class utama yang pertama kali akan dieksekusi.
  • android/: Berisi konfigurasi untuk aplikasi Android pada file build.gradle.
  • ios/: Berisi konfigurasi untuk aplikasi iOS pada file Info.plist.
  • assets/: Direktori dibuat manual untuk menyimpan aset aplikasi seperti gambar, font, dll.
  • test/: Digunakan untuk menyimpan kode testing.
  • pubspec.yaml: Berfungsi sebagai file utama konfigurasi proyek Flutter.
  • README.md: Berisi deskripsi proyek (penjelasan aplikasi, cara install dll).
  • .gitignore: Digunakan untuk pengaturan GIT.

Stateless dan Statefull Widget

Stateless Widget

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

import 'package:flutter/material.dart';

void main() {
  runApp(const MyStateless());
}

class MyStateless extends StatelessWidget {
  const MyStateless({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Stateless Widget"),
        ),
        body: const Center(
          child: Text("ini body"),
        ),
      ),
    );
  }
}
Output:
Statefull 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.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyStatefull());
}

class MyStatefull extends StatefulWidget {
  const MyStatefull({super.key});

  @override
  State createState() => _MyStatefullState();
}

class _MyStatefullState extends State {
  int _kelipatan = 0;

  void _kelipatanDua() {
    setState(() {
      _kelipatan += 2;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Statefull Widget"),
        ),
        body: Center(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.amber,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("Kelipatan 2:"),
                Text(
                  '$_kelipatan',
                  style: Theme.of(context).textTheme.headlineMedium,
                )
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _kelipatanDua,
          tooltip: "Kelipatan 2",
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}
Output:

Basic Widget

Text

Text merupakan widget dasar yang digunakan untuk menampilkan teks pada layar.

Properti:

  • data: Berisi teks yang akan ditampilkan.
  • style: Menerima objek TextStyle untuk mengontrol tampilan teks seperti fontSize, color, fontWeight, dll.
  • textAlign: Mengatur perataan teks secara horizontal.
  • maxLines: Membatasi jumlah baris yang akan ditampilkan.
  • overflow: Mengatur teks yang terlalu panjang (misal: TextOverflow.ellipsis).
return Text(
  "Hai, I am Text Widget",
  style: TextStyle(
    fontSize: 14.0,
    color: Colors.red,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic
  ),
  textAlign: TextAlign.center,
);
Output:
Container

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

Properti:

  • child: Menerima satu widget yang akan ditempatkan di dalam container.
  • color: Mengatur warna background.
  • width & height: Mengatur lebar dan tinggi container.
  • padding: Mengatur jarak antara konten dengan bagian dalam container.
  • margin: Mengatur jarak antara container dengan widget lain di luarnya.
  • decoration: Menerima objek BoxDecoration untuk mengatur warna, border, corner radius, dan shadow.
return Container(
  width: 200,
  height: 200,
  margin: const EdgeInsets.all(20),
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blueAccent,
    border: Border.all(color: Colors.white, width: 2),
    borderRadius: BorderRadius.circular(10)
  ),
  child: Text("Ini di dalam container"),
);
Output:
Elevated Button

ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow.

Properti:

  • onPressed: Menerima sebuah fungsi/callback ketika tombol ditekan.
  • child: Berisi satu widget yang akan ditampilkan di dalam tombol (biasanya Text atau Icon).
  • style: Menerima objek ButtonStyle untuk menyesuaikan tampilan tombol.
return ElevatedButton(
  onPressed: () {
    print("tombol ditekan");
  },
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
    padding: const EdgeInsets.all(20),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16)
    )
  ),
  child: const Text("Elevated Button"),
);
Output:
Icon

Icon merupakan widget yang digunakan untuk menampilkan ikon, seperti Material Icons dari Google atau Cupertino Icons dari Apple.

Properti:

  • icon: Menerima objek IconData dari kelas Icons atau CupertinoIcons.
  • color: Mengatur warna ikon.
  • size: Mengatur ukuran ikon dalam piksel.
// Material Icon (Google)
Icon(
  Icons.add,
  color: Colors.amber,
  size: 50.0,
),
// Cupertino Icon (Apple)
Icon(
  CupertinoIcons.add,
  color: Colors.red,
  size: 50.0,
),
Output:
Image

Image merupakan widget dasar yang digunakan untuk menampilkan gambar dari berbagai sumber seperti asset, network, memory, dan file system.

Network Image
Image.network(
  "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
  width: 100,
  height: 150,
),
Asset Image

Untuk menggunakan gambar dari asset, pertama buat folder assets/images di dalam proyek. Masukkan gambar ke folder tersebut, lalu daftarkan di file pubspec.yaml:

flutter:
  uses-material-design: true
  assets:
    - assets/images/

Kemudian gunakan kode berikut:

Image.asset(
  'assets/images/logo.png',
  width: 100,
  height: 150,
),
Output:
CircleAvatar

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

Properti:

  • child: Widget yang akan ditampilkan di dalam lingkaran (seperti Text atau Icon).
  • backgroundImage: Digunakan untuk menampilkan gambar dari ImageProvider.
  • radius: Mengontrol ukuran lingkaran.
  • backgroundColor: Mengatur warna latar belakang.
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    CircleAvatar(
      radius: 30,
      backgroundColor: Colors.green,
      child: Text(
        "IF",
        style: TextStyle(fontSize: 20, color: Colors.white),
      ),
    ),
    SizedBox(width: 10),
    CircleAvatar(
      radius: 30,
      backgroundColor: Colors.blue,
      child: Icon(
        Icons.person,
        color: Colors.white,
        size: 30,
      ),
    ),
  ],
)
Output:

1.5 Latihan/Tugas

Tugas 1: Tampilan Widget Vertikal dan Horizontal

Tugas ini meminta pembuatan tampilan yang menggabungkan penataan widget secara vertikal dan horizontal.Solusi di bawah ini menggunakan widget Column sebagai penata utama (vertikal). Di dalamnya, disisipkan widget Row untuk menata beberapa widget lain secara berdampingan (horizontal).Tampilan ini menggunakan lebih dari 3 basic widget, yaitu Container, Text, Icon, dan ElevatedButton.

Kode Program Lengkap:
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Tugas 1: Layout Vertikal & Horizontal'),
        ),
        body: Center(
          child: Column(
            // Penataan Vertikal
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // Widget 1
              Container(
                color: Colors.blue,
                padding: const EdgeInsets.all(12.0),
                child: const Text(
                  'Ini widget pertama (Vertikal)',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              const SizedBox(height: 20),

              // Penataan Horizontal di dalam Column
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  // Widget 2
                  const Icon(Icons.star, color: Colors.amber),
                  const SizedBox(width: 10),
                  
                  // Widget 3
                  const Text('Rating Produk'),
                  const SizedBox(width: 10),

                  // Widget 4
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('Beli'),
                  )
                ],
              ),
              const SizedBox(height: 20),

              // Widget 5
               Container(
                color: Colors.green,
                padding: const EdgeInsets.all(12.0),
                child: const Text(
                  'Ini widget terakhir (Vertikal)',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Tugas 2: Tampilan Informasi Profil

Tugas ini adalah membuat halaman profil yang mengimplementasikan semua *basic widget* yang dibahas di modul 2, yaitu Text, Container, ElevatedButton, Icon, Image, dan CircleAvatar.

Solusi di bawah ini menggunakan Container sebagai kartu profil, CircleAvatar untuk foto, Text untuk informasi, Icon untuk detail kontak, dan ElevatedButton sebagai tombol aksi. Untuk mengimplementasikan widget Image, kita bisa menggunakannya sebagai latar belakang pada CircleAvatar dengan `backgroundImage: AssetImage('path/to/your/image.png')`.

Kode Program Lengkap:

Catatan: Untuk menggunakan `AssetImage`, pastikan Anda sudah membuat folder `assets` di proyek Anda, memasukkan gambar ke dalamnya, dan mendaftarkannya di file `pubspec.yaml`.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Tugas 2: Kartu Profil'),
        ),
        backgroundColor: Colors.grey[200],
        body: const Center(
          child: ProfileCard(),
        ),
      ),
    );
  }
}

class ProfileCard extends StatelessWidget {
  const ProfileCard({super.key});

  @override
  Widget build(BuildContext context) {
    // 1. Menggunakan CONTAINER sebagai kartu utama
    return Container(
      width: 300,
      padding: const EdgeInsets.all(20.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15.0),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min, // Agar container menyesuaikan ukuran konten
        children: <Widget>[
          // 2. Menggunakan CIRCLEAVATAR untuk foto profil
          // 3. Widget IMAGE digunakan di sini melalui backgroundImage
          const CircleAvatar(
            radius: 50,
            // Uncomment baris di bawah dan ganti dengan path gambar Anda
            // setelah mendaftarkan folder assets di pubspec.yaml
            // backgroundImage: AssetImage('assets/profil.jpg'), 
            
            // Fallback jika tidak ada gambar, menggunakan Icon
            child: Icon(Icons.person, size: 60, color: Colors.grey),
          ),
          const SizedBox(height: 16),

          // 4. Menggunakan TEXT untuk menampilkan informasi
          const Text(
            'Lara',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          const Text('NIM: 0123456789'),
          const SizedBox(height: 20),

          // Menggunakan ROW dan ICON untuk detail
          const ListTile(
            leading: Icon(Icons.location_on_outlined, color: Colors.blue),
            title: Text('Padang, Sumatera Barat'),
          ),
          const ListTile(
            leading: Icon(Icons.phone_outlined, color: Colors.green),
            title: Text('+62 812 3456 7890'),
          ),
          const ListTile(
            leading: Icon(Icons.school_outlined, color: Colors.purple),
            title: Text('Sistem Informasi'),
          ),
          const SizedBox(height: 24),

          // 5. Menggunakan ELEVATEDBUTTON untuk tombol aksi
          ElevatedButton(
            onPressed: () {},
            child: const Text('Hubungi Saya'),
          ),
        ],
      ),
    );
  }
}

Kembali ke Daftar Laporan