Memahami Proyek Flutter Pertama Kita

Posted on 2026年7月6日 by

Di pelajaran sebelumnya, kita sudah membuat proyek Flutter pertama kita. Proyek ini sangat sederhana, hanya ada satu tombol yang akan menaikkan angka setiap kali diklik. Berikut adalah struktur direktori dari proyek ini.

Struktur Direktori Proyek

Kamu akan melihat banyak folder dan berkas seperti android, web, windows, lib, test dan lainnya. Lalu di mana kita menulis kode sumber? Apakah di folder android? Atau windows? Sebenarnya tidak, kode sumber ada di folder lib. Buka folder lib, kamu akan menemukan berkas main.dart.

Folder lib nantinya akan menjadi tempat menyimpan semua kode sumbermu. Kamu akan menulis kode dengan bahasa Dart, bukan Java ataupun C++. Flutter menggunakan bahasa Dart. Lalu kenapa ada folder android, web, windows dan lainnya di root proyek?

Sangat mudah dipahami, Flutter bisa dikompilasi menjadi aplikasi lintas platform karena adanya folder-folder ini.

Flutter adalah kerangka kerja dengan prinsip Satu kode Dart, bisa berjalan di banyak platform. Folder lib berisi kode bisnis umum lintas platform yang kamu tulis; sedangkan folder android / windows / web / macos / linux adalah proyek induk native tiap platform, fungsinya untuk menanamkan mesin render Flutter agar bisa berjalan di sistem operasi terkait.

1. Folder android

Ini adalah proyek native platform Android

Folder ini menyediakan wadah untuk menjalankan aplikasi Android dan menampung mesin render Flutter. Semua konfigurasi tingkat bawah yang berkaitan dengan Android diatur di sini, contohnya izin aplikasi, ikon, nama paket dan lainnya. Artinya kamu bisa mengatur hal-hal khusus Android di sini serta memanggil API native sistem (kamera, bluetooth, notifikasi, lokasi dan lain-lain).

2. Folder windows

Ini adalah proyek native untuk desktop Windows

Merupakan proyek native C++ Win32 yang berfungsi membuat jendela sistem Windows dan menginisialisasi mesin render Skia. Skia adalah pustaka grafis milik Google, Flutter menggunakan pustaka ini untuk merender jendela dan semua kontrol aplikasi desktop.

Isi folder windows berisi semua konfigurasi tingkat bawah perangkat lunak desktop Windows, seperti ukuran jendela, bilah judul jendela, ikon, baki sistem (ikon di sudut kanan bawah Windows).

Nantinya kamu bisa membungkus proyek menjadi format exe, msix dan menerbitkannya di Microsoft Store.

3. Folder web

Proyek halaman web statis (HTML/JS/CSS) yang menyediakan titik masuk web index.html. Kode Dartmu nantinya akan dikompilasi menjadi sumber daya web.

Kamu bisa mengatur judul halaman, ikon, sumber daya statis dan rute. Saat dikompilasi akan menghasilkan berkas HTML/CSS/JS yang siap diunggah ke server dan dibuka di browser.

Folder Lainnya

Kita tidak menggunakan iOS, macOS dan Linux di contoh ini karena saat membuat proyek tidak mencentang opsi tersebut, sehingga folder-folder itu tidak ada. Namun prinsip kerjanya sama saja.

ios: Proyek Xcode native Apple iOS, untuk membungkus berkas ipa dan rilis ke iPhone

macos: Proyek Cocoa native desktop macOS, klien untuk komputer Mac

linux: Proyek desktop Linux berbasis GTK

Di sudut kanan atas Android Studio kamu bisa memilih platform berbeda untuk mengompilasi versi aplikasi yang berbeda. Kamu juga bisa langsung menggunakan perintah terminal, sebenarnya saat kamu memilih platform dan klik segitiga hijau di Android Studio, sistem akan menjalankan perintah Flutter di belakang layar.

# Jalankan versi Android, baca konfigurasi dari folder android
flutter run -d android

# Jalankan desktop Windows, baca proyek C++ dari folder windows
flutter run -d windows

# Jalankan versi web, baca html dari folder web
flutter run -d chromeCode language: PHP (php)

Buka berkas runner / main.cpp di dalam folder windows

#include <flutter/dart_project.h>
#include <flutter/flutter_view_controller.h>
#include <windows.h>

#include "flutter_window.h"
#include "utils.h"

int APIENTRY wWinMain(_In_ HINSTANCE instance, _In_opt_ HINSTANCE prev,
                      _In_ wchar_t *command_line, _In_ int show_command) {
  // Attach to console when present (e.g., 'flutter run') or create a
  // new console when running with a debugger.
  if (!::AttachConsole(ATTACH_PARENT_PROCESS) && ::IsDebuggerPresent()) {
    CreateAndAttachConsole();
  }

  // Initialize COM, so that it is available for use in the library and/or
  // plugins.
  ::CoInitializeEx(nullptr, COINIT_APARTMENTTHREADED);

  flutter::DartProject project(L"data");

  std::vector<std::string> command_line_arguments =
      GetCommandLineArguments();

  project.set_dart_entrypoint_arguments(std::move(command_line_arguments));

  FlutterWindow window(project);
  Win32Window::Point origin(10, 10);
  Win32Window::Size size(1280, 720);
  if (!window.Create(L"myproject", origin, size)) {
    return EXIT_FAILURE;
  }
  window.SetQuitOnClose(true);

  ::MSG msg;
  while (::GetMessage(&msg, nullptr, 0, 0)) {
    ::TranslateMessage(&msg);
    ::DispatchMessage(&msg);
  }

  ::CoUninitialize();
  return EXIT_SUCCESS;
}
Code language: PHP (php)

Jika kamu mengompilasi untuk Windows Desktop, main.cpp ini adalah titik masuk utama program. Berkas C++ ini akan dieksekusi terlebih dahulu, baru kemudian masuk ke lib/main.dart milikmu.

Sama halnya, jika kamu buka folder android, kamu akan melihat struktur yang hampir mirip dengan proyek Android yang dikembangkan pakai Kotlin atau Java.

Terdapat juga folder src, berkas AndroidManifest.xml, MainActivity dan elemen lain yang sudah kamu kenal jika pernah membuat aplikasi Android. Sebenarnya, saat membuat aplikasi Android pakai Flutter, eksekusi dimulai dari folder android ini.

Begitu juga, buka folder web dan kamu akan menemukan titik masuk web yaitu index.html

Berkas Dart

Berkas main.dart di dalam folder lib akan menjadi tempat kamu melakukan sebagian besar pengembangan. Kamu bisa membuat subfolder dan menambahkan berkas Dart lain di dalam lib.

Buka main.dart

// Impor pustaka komponen Material
import 'package:flutter/material.dart';

// Fungsi titik masuk program
void main() {
  runApp(const MyApp());
}

// Komponen akar aplikasi (tanpa state)
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // Pengaturan tema global
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      // Halaman utama
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// Halaman utama (komponen dengan state)
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // Parameter judul halaman
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// Kelola state halaman utama
class _MyHomePageState extends State<MyHomePage> {
  // Variabel penghitung
  int _counter = 0;

  // Fungsi menaikkan penghitung
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // Kerangka dasar tata letak halaman
    return Scaffold(
      // Bilah navigasi atas
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      // Isi utama halaman
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter', // Tampilkan variabel angka di atas
              style: Theme.of(context).textTheme.headlineMedium, // Gaya teks
            ),
          ],
        ),
      ),
      // Tombol melayang kanan bawah: onPressed jalankan _incrementCounter, tooltip teks bantuan, child atur ikon
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}Code language: JavaScript (javascript)

1. Bagian Titik Masuk

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
Code language: JavaScript (javascript)
  • Mengimpor Material, pustaka UI resmi Google berisi tombol, halaman, teks dan lainnya. Apple juga punya kerangka UI milik sendiri.
  • main adalah satu-satunya titik masuk program Dart; runApp() menjalankan aplikasi dan memasang komponen akar MyApp

2. MyApp Komponen Akar Global

Ini adalah StatelessWidget (komponen tanpa status), kita akan bahas nanti, cukup ketahui saja untuk sekarang.

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

  // Komponen akar aplikasi kamu
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
Code language: JavaScript (javascript)
  • Pengaturan global: Nama aplikasi, tema keseluruhan, halaman awal
  • MaterialApp: Wadah aplikasi gaya Material, mengelola rute, tema, judul secara terpusat
  • home menentukan halaman yang terbuka saat aplikasi pertama kali dibuka yaitu MyHomePage

3. MyHomePage Halaman Utama

Halaman yang muncul secara default saat membuka jendela atau aplikasi, ini adalah StatefulWidget (komponen dengan status), akan dijelaskan rinci nanti.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}Code language: JavaScript (javascript)
  • Memiliki data yang berubah (angka penghitung), sehingga pakai komponen dengan status
  • Menerima parameter title dari luar, dibaca di kelas state melalui widget.title
  • Harus disertai kelas _MyHomePageState yang berfungsi menyimpan variabel halaman dan logika interaksi

4. _MyHomePageState

Kelas logika status, bertugas menangani logika halaman, tampilan dan pembaruan antarmuka

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,

        title: Text(widget.title),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}Code language: JavaScript (javascript)
  1. int _counter = 0: Data variabel halaman yaitu nilai penghitung
  2. _incrementCounter(): Peristiwa klik tombol
    • setState() memberitahu Flutter bahwa data berubah, perlu menyegarkan ulang UI halaman
    • Nilai penghitung bertambah satu
  3. build(): Dijalankan setiap kali ada pembaruan, mengembalikan seluruh tata letak halaman

5. Scaffold Kerangka Halaman

Cetak tata letak halaman, berada di dalam kelas _MyHomePageState

  • appBar: Bilah judul bagian atas
  • body: Isi utama halaman
    • Center rata tengah elemen, Column susun teks secara vertikal
  • floatingActionButton: Tombol bulat tanda tambah di kanan bawah, terhubung dengan fungsi tambah saat diklik

Alur Jalannya Program Secara Keseluruhan

  1. Program dimulai → jalankan main → muat MyApp
  2. MyApp render MaterialApp → muat halaman awal MyHomePage
  3. Halaman menampilkan bilah judul, teks tengah dan tombol tambah
  4. Klik tombol → jalankan _incrementCounter + setState gambarkan ulang halaman → angka berubah

Memahami Proyek Flutter Pertama Kita

POSTED IN Flutter Panduan

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *