← Back to Blog

memulai-flutter-dart

Fapskom IT

Published

3 min read

Memulai dengan Flutter & Dart: Bangun Aplikasi Pertama Anda

Flutter telah berkembang pesat menjadi salah satu framework UI lintas platform paling populer, memungkinkan pengembang untuk merilis aplikasi ke seluler, web, dan desktop dari satu basis kode Dart yang sama. Dalam tutorial ini, kita akan mulai dari nol hingga memiliki aplikasi Flutter yang berfungsi dalam waktu kurang dari 30 menit.

Prasyarat

Sebelum kita mulai, pastikan Anda memiliki:

  • Flutter SDK terinstal (lihat flutter.dev)
  • Dart (termasuk di dalam Flutter — tidak perlu instalasi terpisah)
  • Sebuah IDE — VS Code dengan ekstensi Flutter, atau Android Studio

Menyiapkan Lingkungan Anda

Setelah menginstal Flutter, verifikasi instalasi Anda dengan menjalankan perintah berikut di terminal:

flutter doctor

Perintah ini akan memeriksa lingkungan Anda dan menampilkan laporan tentang dependensi apa pun yang belum terpasang. Hasil yang normal dan sehat akan terlihat seperti ini:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.0)
[✓] Android toolchain - develop for Android devices
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.90.0)

Membuat Proyek Flutter Baru

flutter create aplikasi_pertamaku
cd aplikasi_pertamaku

Perintah di atas akan membuat struktur proyek standar Flutter:

aplikasi_pertamaku/
├── android/
├── ios/
├── lib/
│   └── main.dart       ← Titik masuk (entry point) aplikasi Anda
├── test/
└── pubspec.yaml        ← Manajemen dependensi

Memahami main.dart

Buka file lib/main.dart. Anda akan melihat aplikasi penghitung default bawaan Flutter. Mari kita bedah bagian-bagian pentingnya:

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 Pertamaku',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Konsep Utama Dart & Flutter

1. Semuanya adalah Widget (Everything is a Widget)

UI di Flutter dibangun dari widget yang saling menyusun. StatelessWidget digunakan untuk UI statis/tidak berubah (immutable), sedangkan StatefulWidget digunakan jika UI tersebut dapat berubah secara dinamis berdasarkan interaksi atau data.

2. Metode build

Setiap widget mengimplementasikan metode build yang mengembalikan pohon widget (widget tree). Flutter memanggil metode ini setiap kali UI perlu dirender ulang.

3. Null Safety

Dart memiliki sistem sound null safety yang kuat. Perhatikan penggunaan konstruktor const — ini dievaluasi pada saat kompilasi, sehingga dapat meningkatkan performa render aplikasi secara signifikan.

Membuat Widget Penghitung Khusus (Custom Counter Widget)

Mari kita refaktor kode bawaan di atas agar menjadi widget penghitung yang lebih bersih dan dapat digunakan kembali:

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          '$_count',
          style: Theme.of(context).textTheme.displayLarge,
        ),
        const SizedBox(height: 24),
        FilledButton.icon(
          onPressed: _increment,
          icon: const Icon(Icons.add),
          label: const Text('Tambah'),
        ),
      ],
    );
  }
}

Pemanggilan setState() di dalam metode _increment sangat krusial — ini memberi tahu Flutter bahwa ada data yang berubah dan menginstruksikan sistem untuk menjalankan ulang metode build dengan state terbaru.

Menjalankan Aplikasi

# Jalankan pada perangkat fisik atau emulator yang terhubung
flutter run

# Jalankan pada Chrome (web)
flutter run -d chrome

Hot Reload & Hot Restart

Fitur unggulan Flutter adalah hot reload — cukup tekan tombol r di terminal (atau simpan perubahan file di VS Code) dan perubahan Anda akan langsung muncul tanpa kehilangan data state saat ini.

  • Hot Reload (r) — Memasukkan kode yang diperbarui; mempertahankan state/data aktif.
  • Hot Restart (R) — Membangun ulang aplikasi dari awal; mereset state/data menjadi nol kembali.

Bekerja dengan pubspec.yaml

Dependensi atau pustaka luar di Flutter dikelola di dalam file pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0          # Untuk melakukan HTTP request
  provider: ^6.1.2      # Manajemen state

Setelah menambahkan pustaka baru ke dalam file tersebut, jalankan perintah berikut di terminal:

flutter pub get

Langkah Selanjutnya

Selamat, Anda telah berhasil membangun aplikasi Flutter pertama Anda! Berikut beberapa topik yang bisa Anda pelajari selanjutnya:

  1. State Management — Jelajahi pustaka populer seperti provider, riverpod, atau bloc
  2. Navigation — Gunakan go_router untuk sistem navigasi deklaratif
  3. Networking — Ambil data dari API menggunakan paket http atau dio
  4. Platform Channels — Panggil API bawaan (native) iOS/Android dari kode Dart

Ekosistem Flutter yang kaya serta fitur hot reload menjadikannya pilihan luar biasa untuk pengembangan aplikasi lintas platform. Selamat membuat aplikasi! 🚀

← More Articles