Instalasi & Proyek Flutter Pertama

Memasang Flutter, membuat proyek, memahami struktur folder, dan menjalankan aplikasi dengan MaterialApp dan Scaffold.

Part 2 dari 23 ± 40 menit Gratis

Yang dibutuhkan

Komputer (Windows, macOS, atau Linux) dengan ruang kosong beberapa GB.
Flutter SDK (sudah termasuk Dart) dari flutter.dev.
Editor: Visual Studio Code (dengan ekstensi Flutter) atau Android Studio.
Tempat menjalankan aplikasi: emulator Android, HP asli (aktifkan USB debugging), atau cukup browser Chrome untuk berlatih.

Memeriksa pemasangan

flutter doctor

Perintah ini seperti dokter yang memeriksa kesehatan lingkunganmu. Tanda centang hijau berarti beres; tanda silang menjelaskan apa yang masih kurang beserta cara memperbaikinya.

Membuat dan menjalankan proyek

flutter create aplikasi_pertamaku   # membuat folder proyek
cd aplikasi_pertamaku
flutter run                         # menjalankan di perangkat yang tersedia

Saat aplikasi berjalan, tekan r di terminal untuk Hot Reload (memuat perubahan kode tanpa kehilangan keadaan layar) atau R untuk Hot Restart (mulai ulang aplikasi).

Struktur folder

Folder / berkas	Isinya
`lib/main.dart`	Kode utama aplikasi. Hampir seluruh waktumu ada di sini.
`pubspec.yaml`	Identitas proyek dan daftar paket tambahan (seperti daftar belanja).
`android/`, `ios/`, `web/`	Kode pembungkus tiap platform. Jarang diubah di awal.
`test/`	Pengujian otomatis.

Kerangka aplikasi yang rapi

Aplikasi Flutter biasanya berbentuk seperti ini:

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('Judul')),
        body: const Center(child: Text('Isi halaman')),
      ),
    );
  }
}

MyApp adalah widget buatanmu sendiri (di bab 7 dibahas tuntas). Bagian build menjelaskan "seperti apa tampilannya".
MaterialApp memberi gaya Material Design (gaya bawaan Android) ke seluruh aplikasi dan mengatur halaman awal lewat home:.
Scaffold adalah kerangka halaman: punya tempat untuk appBar (bilah judul di atas) dan body (isi).
AppBar adalah bilah judul; Center menaruh isinya di tengah.

Hasilnya di layar: bilah berwarna di atas dengan judul, dan teks di tengah halaman. Menyusun widget bersarang seperti inilah yang disebut widget tree (pohon widget).