1.4 Membuat dan Menjalankan Aplikasi Flutter
Setelah lingkungan pengembangan Flutter siap, langkah selanjutnya adalah mempelajari cara membuat proyek baru dan menjalankannya pada emulator Android, browser, atau perangkat fisik.
1. Memahami Struktur Proyek Standar Flutter
Ketika sebuah proyek baru dibuat, Flutter secara otomatis menghasilkan direktori dan berkas dasar dengan struktur sebagai berikut:
nama_proyek/
├── android/ <-- Kode spesifik & konfigurasi platform Android
├── ios/ <-- Kode spesifik & konfigurasi platform iOS
├── web/ <-- Berkas HTML/JS untuk platform Web
├── linux/ <-- Kode spesifik platform Linux Desktop
├── windows/ <-- Kode spesifik platform Windows Desktop
├── lib/ <-- Kode utama aplikasi berbasis Dart (Wajib)
│ └── main.dart <-- Titik masuk utama (Entry point) aplikasi
├── test/ <-- Berkas pengujian unit test (Widget test)
├── pubspec.yaml <-- Berkas konfigurasi dependensi & aset (Gambar/Font)
└── README.md
2. Metode 1: Menggunakan Perintah Baris (Command Line / CLI)
Metode CLI adalah cara paling cepat dan universal yang bekerja di seluruh sistem operasi.
Langkah 1: Membuat Proyek Baru
Buka terminal/Command Prompt, berpindah ke folder kerja Anda, lalu jalankan perintah flutter create:
flutter create aplikasi_pertama
Catatan Naming: Nama proyek Flutter harus menggunakan huruf kecil dan garis bawah (snake_case). Hindari karakter kapital atau tanda hubung (kebab-case).
Langkah 2: Menjalankan Aplikasi
Masuk ke folder proyek, lalu jalankan aplikasi menggunakan perintah flutter run:
cd aplikasi_pertama
flutter run
Jika ada lebih dari satu perangkat/emulator yang terhubung, pilih perangkat spesifik dengan parameter -d:
# Menjalankan di Google Chrome
flutter run -d chrome
# Menjalankan di emulator Android spesifik
flutter run -d emulator-5554
3. Metode 2: Menggunakan Android Studio
Langkah 1: Membuat Proyek Baru
- Buka Android Studio.
- Pada layar Welcome, klik New Flutter Project (atau masuk ke menu File > New > New Flutter Project...).
- Tentukan jalur Flutter SDK path jika belum terdeteksi (contoh:
C:\src\flutter atau ~/development/flutter).
- Isi detail proyek:
- Project name:
aplikasi_pertama
- Project location: Folder penyimpanan proyek
- Platforms: Centang Android, iOS, Web, dsb.
- Klik Create.
Android Studio -> File -> New -> New Flutter Project -> Set SDK Path -> Next -> Create
Langkah 2: Menjalankan Aplikasi
- Pilih target perangkat pada dropdown Target Device di toolbar atas.
- Klik tombol Run (ikon segitiga hijau
▶) atau tekan tombol Shift+F10.
4. Metode 3: Menggunakan Visual Studio Code
Langkah 1: Membuat Proyek Baru
- Buka Visual Studio Code.
- Buka Command Palette dengan menekan
Ctrl+Shift+P (atau Cmd+Shift+P di macOS).
- Ketik dan pilih Flutter: New Project.
- Pilih opsi Application.
- Pilih folder tempat menyimpan proyek.
- Masukkan nama proyek (contoh:
aplikasi_pertama), lalu tekan Enter.
VS Code -> Ctrl+Shift+P -> "Flutter: New Project" -> Application -> Select Folder -> Name Project
Langkah 2: Menjalankan Aplikasi
- Buka berkas
lib/main.dart.
- Klik indikator nama perangkat di sudut kanan bawah status bar VS Code untuk memilih target emulator.
- Tekan
F5 atau pilih menu Run > Start Debugging (atau Ctrl+F5 untuk Run Without Debugging).
5. Contoh Kode Utama Sederhana (lib/main.dart)
Berikut adalah bentuk sederhana dari kode lib/main.dart:
import 'package:flutter/material.dart';
void main() {
runApp(const AplikasiSaya());
}
class AplikasiSaya extends StatelessWidget {
const AplikasiSaya({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Aplikasi Pertama',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HalamanUtama(),
);
}
}
class HalamanUtama extends StatelessWidget {
const HalamanUtama({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Hello Flutter'),
),
body: const Center(
child: Text(
'Selamat Datang di Pemrograman Flutter!',
style: TextStyle(fontSize: 18),
),
),
);
}
}
6. Rangkuman
- Berkas entry point utama aplikasi Flutter terletak pada
lib/main.dart.
- Konfigurasi aset dan pustaka eksternal dikelola melalui berkas
pubspec.yaml.
- Proyek baru dapat dibuat via CLI (
flutter create), Android Studio (New Flutter Project), maupun VS Code (Command Palette).
- Menjalankan aplikasi dapat dilakukan dengan perintah
flutter run di terminal atau tombol Run/F5 di IDE.
7. Latihan & Pertanyaan Evaluasi
- Jelaskan fungsi dari berkas
pubspec.yaml dalam struktur proyek Flutter!
- Mengapa penamaan proyek Flutter wajib menggunakan format snake_case?
- Sebutkan langkah-langkah membuat proyek baru Flutter menggunakan Visual Studio Code Command Palette!