Memahami Anatomi, Pustaka Dasar, dan Logika Wadah Sebelum Mendesain UI
Kelas 11 • Semester 1 • Modul Interaktif 31 Slide Lengkap
Ibarat belajar HTML dasar (tag skeleton) sebelum masuk ke styling CSS & interaksi di Bab 5!
Jika kamu pernah belajar Web (HTML & CSS), Flutter memiliki logika kerangka yang sangat mirip!
<link rel="stylesheet" ...> → Impor pustaka komponen.<html><body> → Kerangka dasar dokumen kosong.<header>, <main> → Pembagian slot layar.<div> punya banyak anak & <p> membungkus teks.import 'package:flutter/material.dart'; → Impor balok Material.MaterialApp > Scaffold → Kerangka kanvas layar kosong.appBar: & body: → Slot resmi penempatan widget.children: [] (banyak anak) vs child: (1 anak).Flutter bukan sekadar pembuat tombol. Flutter adalah mesin grafis berkecepatan tinggi buatan Google yang melukis setiap pixel di layar ponselmu hingga 60-120 frame per detik!
Langkah resmi membuat kerangka proyek aplikasi Flutter dari awal menggunakan shortcut sakti Command Palette!
>.
>Flutter: New Project lalu tekan Enter.
aplikasi_pertamaku), lalu tekan Enter!
Aplikasi Keren (Dilarang pakai huruf BESAR & dilarang pakai SPASI!).1_projek (Dilarang diawali angka!).aplikasi_keren atau belajar_flutter_bab4 (Gunakan huruf kecil semua dan tanda garis bawah _).>Flutter: New Project tidak muncul di VS Code, pastikan ekstensi Flutter buatan Dart Code sudah terpasang dari menu Extensions (Ctrl + Shift + X)!
Mengapa kita butuh kerangka khusus saat pindah dari terminal ke aplikasi ponsel?
Di terminal, output hanya berupa barisan teks berurutan ke bawah:
void main() {
print("Selamat datang!");
}
Di smartphone, layar adalah kanvas 2D berpixel jutaan:
runApp(const MaterialApp(
home: Scaffold(body: Center(child: Text("...")))
));
print() di ponsel. Kamu butuh Scaffold sebagai kanvas kerja tempat meletakkan teks tersebut!
import 'package:flutter/material.dart';Pernahkah kamu bertanya-tanya: "Dari mana Flutter tahu apa itu Scaffold, AppBar, dan Center?"
Di baris pertama file main.dart, selalu ada mantra sakti ini:
import 'package:flutter/material.dart';import = Mengambil atau meminjam kode dari luar.package:flutter = Paket pustaka inti bawaan framework Flutter.material.dart = Gudang yang berisi ribuan cetak biru komponen standar Google Material Design.
Jika baris ini terhapus, editor VS Code akan memerah total! Kata StatelessWidget, Widget, MaterialApp, dan Scaffold akan dianggap sebagai "kata asing yang tidak dikenal" oleh Dart.
void main() dan Proyektor runApp()Setiap program Dart bermula dari fungsi main(). Di Flutter, ia punya satu misi khusus!
void main() {
runApp(const MyApp());
}void main(): Titik mula eksekusi yang dipanggil oleh sistem operasi Android/iOS.runApp(Widget app): Fungsi bawaan Flutter yang bertindak sebagai proyektor ajaib.MyApp(): Widget induk pertama yang akan direntangkan memenuhi seluruh layar smartphone.Satu kalimat yang akan selalu kamu dengar di dunia Flutter: Semuanya adalah Widget!
Menampilkan informasi di layar.
Text("Halo")Icon(Icons.star)
Mengatur letak dan jarak.
Center(...)Padding(...)
Membentuk kerangka kanvas.
MaterialApp(...)Scaffold(...)
Aplikasi Flutter tersusun rapi seperti pohon silsilah keluarga: ada Kakek → Ayah → Anak → Cucu.
MaterialApp).Scaffold adalah parent bagi Center.Text adalah anak dari Center.Semua komponen tampilan di Flutter terbagi menjadi dua spesies besar. Di Bab 4 ini, kita fokus menuntaskan StatelessWidget!
Analogi Nyata: Kartu Pelajar Plastik / Sertifikat yang Sudah Dicetak
TIDAK ADA! Begitu digambar oleh method build(), tampilannya terkunci mati (immutable).
Super Ringan & Instan (0 ms)! Sangat hemat baterai dan RAM ponsel karena tidak perlu memantau perubahan data.
Gunakan untuk elemen yang datanya tetap: Judul bab, logo sekolah, kartu profil statis, tombol statis, teks panduan.
Analogi Nyata: Papan Skor Digital LED di Lapangan Futsal Sekolah
setState() memerintahkan Flutter menggambar ulang layar secara realtime!
YA, PUNYA OTAK! Memiliki objek pendamping (State) yang bertugas mengingat data yang berubah-ubah.
setState()Ketika data berubah, fungsi setState(() { ... }) berteriak ke Flutter: "Layar, gambar ulang angka terbarunya sekarang!"
Gunakan jika ada interaksi yang mengubah tampilan: Form login (ketik teks), keranjang belanja, Like Instagram, timer stopwatch.
Sebelum membuat Widget baru di Flutter, selalu tanyakan 1 pertanyaan sakti ini ke dirimu sendiri:
StatelessWidget (Cepat, Ringan, 100% Aman)StatefulWidget (Butuh Otak Memori State)1. Teks judul header "Profil Siswa" di bagian paling atas aplikasi:
StatelessWidgetMari kita bedah anatomi kode class yang selalu kamu lihat di Flutter:
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(),
);
}
}class ... extendsIngat Bab 3 OOP! Kita membuat cetak biru baru bernama MyApp yang mewarisi sifat bawaan Flutter: StatelessWidget.
const MyApp({super.key})Constructor widget. Parameter key adalah tanda pengenal unik yang dipakai Flutter untuk melacak posisi widget di pohon.
Widget build(...)Jantung utama yang bertugas mengembalikan susunan visual yang ingin digambar ke layar ponsel.
build(BuildContext context)Method ini adalah tempat kamu menentukan: "Bentuk apa yang ingin kamu gambar?"
Flutter adalah kokinya, dan method build() adalah buku resepnya. Setiap kali layar perlu digambar ulang, Flutter akan membaca isi resep di dalam build().
@override:build() standar milik StatelessWidget dengan racikan buatan kita sendiri.
BuildContext context:MaterialApp — Fondasi Utama Seluruh AplikasiMengapa kita tidak bisa langsung mengetik Scaffold? Mengapa wajib dibungkus MaterialApp?
MaterialAppMaterialAppBerikut 3 parameter yang paling sering kamu sentuh pada tahap awal:
return MaterialApp(
title: 'Kantin Sekolah', // 1. Nama aplikasi di recent apps
debugShowCheckedModeBanner: false, // 2. Hilangkan pita merah "DEBUG"
home: const Scaffold(), // 3. Halaman pembuka pertama
);title:Nama aplikasi yang muncul saat pengguna menekan tombol multitasking (Recent Apps) di ponsel.
debugShowCheckedModeBanner:Set ke false jika ingin menghilangkan pita merah bertuliskan "DEBUG" di pojok kanan atas layar.
home:Halaman pertama yang langsung muncul saat aplikasi dibuka. Di sinilah kita pasang Scaffold()!
Scaffold? (Lembar Kanvas Berslot)Dalam bahasa Inggris, Scaffold artinya perancah bangunan. Di Flutter, Scaffold adalah lembaran kanvas putih standar yang sudah menyiapkan lubang-lubang slot untuk meletakkan komponen layar.
appBar atau body!ScaffoldKlik tombol slot di sebelah kiri untuk melihat letak posisinya di layar ponsel virtual!
Slot di bagian paling atas ponsel untuk menampilkan judul halaman, profil, atau ikon aksi.
Scaffold(
appBar: AppBar(
title: const Text("Beranda"),
),
)appBar: (Bilah Judul Header Atas)Slot ini selalu berada di bagian paling atas layar ponsel.
Scaffold(
appBar: AppBar(
title: const Text('Profil Siswa'),
backgroundColor: Colors.indigo,
centerTitle: true,
),
)title: → Menampung widget teks untuk judul bilah atas.backgroundColor: → Memberikan warna dasar bilah judul.centerTitle: true → Memaksa judul teks berada persis di tengah.body: (Lapangan Kerja Utama Kita)Jika appBar adalah topinya, maka body adalah seluruh tubuh aplikasi!
body:body: ini.body akan menempel di koordinat (0,0) pojok kiri atas.body: hanya bisa menerima 1 buah widget induk (seperti Center, Column, atau Row).Scaffold(
body: Center(
// 👉 DI SINI KITA AKAN EKSPERIMEN WIDGET!
child: Text("Halo Dunia!"),
),
)
Dengan membungkus teks menggunakan Center, teks otomatis ditarik ke tengah kanvas layar!
Cukup kenali dulu posisi dan namanya, kamu tidak perlu langsung menghafal kodenya sekarang!
Tombol aksi bulat melayang di pojok kanan bawah.
Biasa dipakai untuk tombol "Tambah Data" atau "Kirim Pesan".Laci navigasi samping yang bisa digeser masuk dari kiri.
Tempat menyimpan menu-menu aplikasi tambahan.Bilah navigasi tab di bagian paling bawah layar.
Seperti baris menu di Instagram, YouTube, atau TikTok.child: vs children:?Inilah kebingungan nomor 1 siswa pemula saat belajar Flutter. Mari kita selesaikan hari ini!
child:)Kata benda tunggal (1 anak saja). Wadah ini HANYA BISA menampung SATU widget di dalamnya!
child: Text("Hanya 1 anak!")
children:)
Kata benda jamak (banyak anak). Wadah ini menggunakan kurung siku [ ... ] (tipe List di Dart) untuk menampung BANYAK widget!
children: [ Text("Anak 1"), Text("Anak 2") ]
child:, jangan pernah pasang tanda kurung siku [ ]. Sebaliknya jika berakhiran children:, wajib gunakan tanda [ ]!
Widget ini berada di ujung ranting pohon tampilan. Tugasnya murni menyajikan isi informasi.
Text(...)Menampilkan tulisan teks di layar.
Text('Halo Flutter!')Icon(...)Menampilkan simbol atau logo grafis.
Icon(Icons.home)Image.network(...)Menampilkan foto atau gambar.
Image.network('url...')child:)Widget yang bertindak sebagai pembungkus untuk mengatur posisi atau ukuran satu anak.
Center(child: ...)Menarik anak tunggalnya tepat ke titik tengah kanvas layar.
Center(
child: Text("Persis di Tengah!"),
)Container(child: ...)Kotak serbaguna pembungkus 1 anak (mirip tag <div> di HTML).
Container(
child: Text("Di dalam kotak"),
)Padding(child: ...)Memberikan jarak ruang bantalan keliling untuk anaknya.
Padding(
padding: EdgeInsets.all(16.0),
child: Text("Diberi jarak"),
)SizedBox(child: ...)Kotak dengan lebar dan tinggi pasti untuk membatasi ukuran anak.
SizedBox(
width: 200, height: 100,
child: Text("Kotak berukuran"),
)children: [])Jika kamu ingin menyusun lebih dari 1 widget, gunakan wadah berarah ini:
Column(children: [])Menata banyak anak berbaris dari atas ke bawah (vertikal).
Column(
children: [
Text("Baris 1"),
Text("Baris 2"),
],
)Row(children: [])Menata banyak anak berbaris dari kiri ke kanan (horizontal).
Row(
children: [
Icon(Icons.star),
Text("Bintang"),
],
)Stack(children: [])Menumpuk banyak anak lapis demi lapis ke depan (seperti pancake / z-index).
Stack(
children: [
Image.asset('bg.png'),
Text("Teks di atas foto"),
],
)Pilih wadah, lalu coba klik "Tambah Anak" untuk membuktikan aturan wadah Flutter!
Center(
// ✅ child HANYA BISA 1 ANAK!
child: Text("Anak 1: Aku di Tengah!"),
)Center, Flutter akan menampilkan pesan compile error!
main.dart & BersihkanSebelum kita mulai membuat aplikasi, kita harus membersihkan kode bawaan yang membingungkan!
Saat pertama kali membuat project (flutter create nama_project), Flutter menyediakan file contoh bernama Counter App (aplikasi hitung angka).
StatefulWidget yang rumit bagi pemula.lib/main.dart di editor VS Code kamu.✔ Jangan takut, menghapus kode bawaan adalah langkah resmi seluruh programmer Flutter untuk menyiapkan kanvas kerja yang bersih!
Salin kode starter boilerplate minimalis di bawah ini dan tempelkan ke dalam lib/main.dart kamu:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
// 👉 DI SINI KITA AKAN EKSPERIMEN WIDGET!
child: Text("Halo Flutter!"),
),
),
);
}
}
Perhatikan baris dengan komentar:
// 👉 DI SINI KITA AKAN EKSPERIMEN WIDGET!
Mulai dari sekarang dan di bab-bab berikutnya, kita HANYA akan mengganti kode di dalam body: ini saja! Seluruh struktur kerangka luar biarkan tetap utuh seperti ini.
Tekan tombol F5 di VS Code untuk menjalankan aplikasi ke emulator atau HP kamu!
“Mengganti baju tanpa perlu keluar rumah.”
Super Cepat (< 1 Detik)Dipakai saat kamu mengubah teks, mengganti warna, atau merapikan posisi widget.
“Mandi dari awal — semua diulang dari nol.”
Mereset Ulang AplikasiDipakai jika kamu mengubah fungsi main() atau struktur class dasar.
Klik kartu flashcard di bawah untuk menguji ingatanmu terhadap konsep-konsep kunci Bab 4:
ScaffoldUji pemahamanmu tentang letak slot di lembar kanvas Scaffold:
child: atau children:?Pilih properti wadah yang tepat berdasarkan kebutuhan tampilan:
Center bertugas menarik 1 widget agar berada persis di tengah layar. Properti apa yang dimiliki Center?Column ingin menyusun 4 buah tombol dan teks dari atas ke bawah. Properti apa yang digunakan?Kamu telah menguasai fondasi kerangka Flutter tanpa ada satu pun konsep yang terlewat.
package:flutter/material.dart.void main() dan proyektor runApp().StatelessWidget vs StatefulWidget.MaterialApp & slot-slot Scaffold.child:) vs banyak anak (children:).Di BAB 5 nanti, kita akan mulai belajar "CSS & Komponen Interaktif di Flutter":
TextStyle).BoxDecoration).ElevatedButton, OutlinedButton, IconButton.onPressed: () {}).