BAB 4 — FLUTTER FUNDAMENTAL

Dari Menulis Program ke Membangun Aplikasi

Pada BAB ini, kita berpindah dari menulis program menjadi membangun aplikasi.

Membuat Project Flutter

belajar_flutter
aplikasi_pertama
kasir_sederhana
data_siswa

Belajar Flutter   // ada spasi!
BelajarFlutter    // huruf besar!
belajar-flutter   // pakai strip!
belajar flutter   // spasi lagi!

Struktur Project Flutter

Setelah project dibuat, kita akan melihat banyak folder. Jangan panik! Kita akan memahami satu per satu.

lib/
├── main.dart       ⭐ file utama
├── pages/          (nanti)
├── widgets/        (nanti)
├── models/         (nanti)
└── services/       (nanti)

main.dart — Titik Awal Aplikasi

Bagaimana Aplikasi Mulai Berjalan?

Mari kita urutkan langkah demi langkah apa yang terjadi saat aplikasi dijalankan.

import 'package:flutter/material.dart';
//         ↑ mengambil paket Material

void main() {
//  ↑ titik awal eksekusi
  runApp(const MyApp());
// ↑ menjalankan aplikasi
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Halo Flutter!')),
      ),
    );
  }
}

Apa Itu Widget? — Blok Pembangun Tampilan

Di Flutter, berlaku satu prinsip utama yang sangat terkenal: “Everything is a Widget” (Semuanya adalah Widget!).

2. Widget Itu Seperti “Instruksi untuk Membentuk UI”

Melangkah lebih dalam daripada sekadar analogi mainan: Widget adalah Deskripsi UI (Resep Instruksi), bukan benda mati!

Center(
  child: Text("Assalamu'alaikum"),
)

3. Widget Bisa Berisi Widget Lain (Parent & Child)

Bagian yang wajib dikuasai kuat sebelum kita masuk ke pembahasan method build().

Center(
  child: Text("Halo Flutter"),
)
// Center = parent (induk)
// Text   = child  (anak)

Column(
  children: [
    Text("Nama"),
    Text("Abiy"),
    Icon(Icons.school),
  ],
)
// Column   = parent
// children = List berisi 3 widget anak

4. Dari Widget Sederhana Menjadi Tampilan Kompleks

🎯 Tantangan Berpikir untuk Siswa & Guru!

5. Ada Widget yang Menjadi “Wadah”

Mengenal peran Container dan Padding sebelum kita masuk ke struktur layar yang lebih besar.

Container(
  color: Colors.blue,
  child: Text("Halo"),
)

6. Widget Itu Sebenarnya Class Dart!

Kamu sudah belajar Dart OOP di BAB 3. Sekarang manfaatkan pengetahuan tersebut!

class MyWidget extends StatelessWidget {
  // 1. class MyWidget          --> Membuat Class baru
  // 2. extends StatelessWidget --> Pewarisan / Inheritance (BAB 3!)
  
  @override
  Widget build(BuildContext context) {
    return const Text("Halo!");
  }
}

7. Contoh: Kita Membuat Widget Sendiri

Inilah jembatan terbaik yang akan membuatmu memahami fungsi method build() secara alami.

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

  @override
  Widget build(BuildContext context) {
    return const Text("Halo!");
  }
}

Build Method — Cara Widget Menggambar Diri

@override
Widget build(BuildContext context) {
  // build() mengembalikan widget yang akan digambar di layar
  return const Text('Aku digambar oleh build()');
}

MaterialApp — Fondasi Aplikasi

MaterialApp(
  title: 'Aplikasi Pertamaku',
  theme: ThemeData(primarySwatch: Colors.deepPurple),
  home: const HalamanUtama(), // halaman pembuka
);

Scaffold — Kerangka Layar

Scaffold(
  appBar: AppBar(title: const Text('Beranda')),
  body: const Center(child: Text('Isi layar di sini')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
);

AppBar — Bilah Judul

AppBar(
  title: const Text('Biodataku'),
  backgroundColor: Colors.deepPurple,
  actions: [
    IconButton(onPressed: () {}, icon: const Icon(Icons.share)),
  ],
);

Body — Isi Utama Layar

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: const [
    Icon(Icons.person, size: 80),
    Text('Nama: Sahil'),
    Text('Kelas: 10 SMA'),
  ],
);

FloatingActionButton — Tombol Mengambang

floatingActionButton: FloatingActionButton(
  onPressed: () {
    print('Tombol ditekan!');
  },
  tooltip: 'Tambah',
  child: const Icon(Icons.add),
);

Hot Reload vs Hot Restart

Dua “jurus” ajaib Flutter yang membuat ngoding terasa instan.

Flowchart Alur Eksekusi Flutter

Inilah urutan yang dijalankan Flutter dari awal sampai layar tampil. Klik “Putar Ulang” untuk melihat animasinya.

Aplikasi Biodata Sederhana

Sekarang kita gabungkan SEMUA materi tadi menjadi satu aplikasi nyata.

Fondasi Aplikasi (main & MaterialApp)

Bagian ini menyiapkan pondasi: titik masuk dan tema aplikasi. Baca komentar // di tiap baris.

import 'package:flutter/material.dart'; // ambil paket Flutter

void main() => runApp(const BiodataApp()); // titik masuk aplikasi

// Widget paling luar = pondasi aplikasi
class BiodataApp extends StatelessWidget {
  const BiodataApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Biodata',
      debugShowCheckedModeBanner: false,     // sembunyikan label debug
      theme: ThemeData(primarySwatch: Colors.deepPurple),
      home: const HalamanBiodata(),          // halaman utama
    );
  }
}

Halaman Biodata (Scaffold & Isi)

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Biodata Saya'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          CircleAvatar(
            radius: 50,
            child: Icon(Icons.person, size: 50),
          ),
          SizedBox(height: 16),
          Text('Sahil Pratama',
            style: TextStyle(
              fontSize: 22,
              fontWeight: FontWeight.bold,
            )),
          Text('Kelas 10 SMA - Mobile Dev'),
          SizedBox(height: 8),
          Text('Hobi: Coding, Game, Musik'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: null,
        child: Icon(Icons.edit),
      ),
    );
  }
}

Menjalankan Aplikasi Biodata

Beginilah proses saat kamu menekan tombol Run di editor:

Recap — Klik Kartu untuk Membalik

Ubah Tema dan AppBar

appBar: AppBar(
  title: const Text('Namamu'),     // ganti namamu
  backgroundColor: Colors.red,     // jadi merah
),

Tambahkan Widget ke Biodata

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: const [
    Icon(Icons.sports_esports),  // ikon hobi
    SizedBox(width: 8),
    Text('Hobi: Main Game'),
  ],
),

Buat Aplikasi Kartu Nama Digital

⏰ Deadline: ____ / ____ / ______  |  Kumpulkan file .dart + screenshot aplikasi.