Pada artikel sebelumnya, kita sudah berhasil mengonfigurasi Flutter SDK, Android toolchain, dan VS Code hingga lolos verifikasi flutter doctor. Sekarang saatnya kita masuk ke dunia kode yang sesungguhnya.
Saat pertama kali membuat project baru, Flutter akan men-generate puluhan file dan folder secara otomatis. Bagi pemula, tampilan ini sering kali terasa membingungkan: folder mana yang boleh diedit, folder mana yang jangan disentuh, dan dari mana aplikasi sebenarnya mulai dieksekusi?
Di artikel ini, kita akan membedah struktur direktori project Flutter serta mengupas tuntas anatomi file lib/main.dart baris demi baris.
Membuat Project Flutter Pertama
Buka terminal di VS Code atau terminal sistem Anda, arahkan ke direktori kerja, lalu jalankan perintah berikut:
flutter create belajar_flutter_dasar
cd belajar_flutter_dasar
code .Perintah di atas akan membuat satu workspace lengkap yang siap dijalankan di berbagai platform.
Memahami Struktur Folder Project Flutter
Berikut adalah peta folder utama yang dihasilkan oleh Flutter:
belajar_flutter_dasar/
├── android/ # Native project untuk platform Android (Gradle/Kotlin)
├── ios/ # Native project untuk platform iOS (Xcode/Swift)
├── web/ # Entry point untuk Flutter Web (index.html)
├── windows/ # Native runner untuk Windows Desktop
├── macos/ # Native runner untuk macOS Desktop
├── linux/ # Native runner untuk Linux Desktop
├── lib/ # PUSAT KODING: Semua kode Dart Anda ada di sini
│ └── main.dart # Entry point utama aplikasi
├── test/ # Unit testing dan widget testing
├── pubspec.yaml # Konfigurasi dependensi, aset gambar, dan font
└── pubspec.lock # Pengunci versi paket dependensiFolder yang Perlu Anda Fokuskan
- lib/: Ini adalah dapur utama Anda. Sekitar 95% waktu ngoding Anda akan dihabiskan di dalam folder ini. File lib/main.dart adalah titik masuk pertama saat aplikasi dijalankan.
- pubspec.yaml: File konfigurasi utama. Di sini Anda menambahkan library pihak ketiga (package dari pub.dev), mendaftarkan gambar/aset lokal, serta mengatur custom font. Catatan penting: file ini menggunakan format YAML yang sangat sensitif terhadap spasi (indentasi).
- Folder Native Platform (android/, ios/, dll): Folder-folder ini adalah wrapper native. Anda biasanya hanya menyentuhnya ketika perlu mengatur konfigurasi level OS, seperti mengubah ikon aplikasi, mengganti package name/bundle ID, atau mengatur izin akses kamera dan lokasi (permissions).
Anatomi dan Bedah File lib/main.dart
Mari kita bersihkan boilerplate bawaan counter app dan buat versi minimalis yang bersih agar konsepnya mudah dipahami. Ganti isi lib/main.dart dengan kode berikut:
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(
title: 'Aplikasi Pertama',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Beranda Flutter'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: const Center(
child: Text(
'Halo, ini aplikasi Flutter pertama saya!',
style: TextStyle(fontSize: 16),
),
),
);
}
}Mari kita bedah kode di atas menjadi 4 bagian krusial:
1. Function main() dan runApp()
void main() {
runApp(const MyApp());
}main(): Titik awal eksekusi program Dart.
runApp(): Fungsi bawaan Flutter yang bertugas mengambil root widget (MyApp) dan merendernya ke layar perangkat.
2. Widget Root: MaterialApp
return MaterialApp(
title: 'Aplikasi Pertama',
theme: ThemeData(...),
home: const HomePage(),
);MaterialApp adalah pembungkus utama yang menyediakan desain sistem berbasis Material Design. Widget ini mengatur tema global, navigasi/routing, dan menentukan halaman pertama yang tampil lewat properti home.
3. Struktur Layout Dasar: Scaffold
return Scaffold(
appBar: AppBar(...),
body: Center(...),
);Scaffold adalah kanvas struktur layout standar aplikasi mobile. Widget ini menyediakan slot bawaan yang siap pakai, seperti:
- appBar: Bar navigasi di bagian atas layar.
- body: Area konten utama aplikasi.
- floatingActionButton: Tombol aksi melayang di sudut bawah.
- bottomNavigationBar: Menu navigasi di bawah layar.
4. Widget Tree (Pohon Komponen)
Perhatikan bagaimana layout di dalam body disusun:
Scaffold ➔ body ➔ Center ➔ child ➔ TextFlutter menggunakan konsep hirarki pohon widget (Widget Tree). Setiap widget induk (parent) membungkus widget anak (child/children) untuk menyusun tata letak visual secara deklaratif.
Kesimpulan
Memahami struktur folder dan anatomi main.dart memberikan peta jalan yang jelas saat mulai mengembangkan aplikasi. Anda tahu di mana harus menaruh file aset, di mana mengonfigurasi dependensi, dan bagaimana susunan MaterialApp serta Scaffold bekerja sebagai kerangka dasar.
Di artikel berikutnya (Part 4), kita akan membahas Teknik Layout Dasar di Flutter: Menguasai Container, Row, Column, dan ListView.
