Hari 1: Pengenalan Flutter dan Setup

Fri, May 2025 14:32:03

Halo teman-teman! Di hari pertama perjalanan kita belajar Flutter, kita bakal bahas dari nol banget: mulai dari apa itu Flutter, kenapa harus pakai Flutter, dan gimana cara setup-nya biar kita bisa langsung ngoding aplikasi pertama kita. Yuk kita mulai!

Apa Itu Flutter?

Flutter adalah sebuah framework open-source buatan Google yang digunakan untuk membangun aplikasi mobile, web, dan desktop dari satu basis kode (codebase). Dengan Flutter, kamu bisa bikin aplikasi Android dan iOS hanya dengan satu kali ngoding. Mantap, kan?

Flutter pertama kali diumumkan di tahun 2017 dan sampai sekarang terus berkembang dengan komunitas yang aktif dan dukungan langsung dari Google. Framework ini menggunakan bahasa pemrograman Dart, yang juga dikembangkan oleh Google.

Kenapa Flutter?

Nah, berikut ini beberapa alasan kenapa banyak developer (termasuk saya) suka banget pakai Flutter:

1. Cross-Platform
   • Satu codebase bisa untuk Android dan iOS. Bahkan sekarang Flutter juga bisa untuk Web dan Desktop.
2. Hot Reload
   • Fitur keren yang bikin kita bisa langsung lihat hasil perubahan kode tanpa harus build ulang. Ini hemat waktu banget!
3. UI yang Kaya dan Kustom
   • Flutter punya widget-widget bawaan yang sangat fleksibel dan bisa dikustomisasi sesuai kebutuhan kita.
4. Performa Tinggi
   • Karena Flutter langsung dikompilasi ke native ARM code, performanya hampir setara aplikasi native.
5. Dukungan Komunitas dan Plugin Lengkap
   • Banyak plugin yang udah siap pakai, jadi kita nggak perlu bikin semuanya dari nol.

Instalasi Flutter

Oke, sekarang kita mulai dengan setup lingkungan kerja Flutter. Ikuti langkah-langkah berikut ini ya.

1. Download dan Install Flutter SDK

1. Buka situs resmi Flutter: https://flutter.dev
2. Pilih OS yang kamu pakai (Windows, macOS, Linux)
3. Download SDK-nya
4. Ekstrak ke direktori yang kamu inginkan, misalnya C:\flutter

2. Tambahkan Flutter ke PATH

Agar bisa menjalankan perintah flutter di terminal, tambahkan C:\flutter\bin ke environment variable PATH kamu.

• Di Windows:
  • Buka System Properties > Environment Variables
  • Di bagian "System Variables", cari variabel Path, klik Edit
  • Tambahkan: C:\flutter\bin

3. Cek Instalasi dengan flutter doctor

Setelah PATH sudah diatur, buka terminal atau Command Prompt, lalu ketik:

flutter doctor

Perintah ini akan mengecek apakah semua kebutuhan Flutter sudah terinstall, termasuk:

• Flutter SDK
• Android toolchain (Android Studio, SDK, dll.)
• Chrome (jika ingin target Web)
• Visual Studio (untuk Windows Desktop)
• Plugin IDE (VS Code / Android Studio)

Ikuti petunjuk dari flutter doctor untuk menyelesaikan semua yang masih belum lengkap.

4. Install VS Code atau Android Studio

Flutter mendukung dua IDE populer:

• Visual Studio Code (VS Code)
  • Ringan, cepat, dan banyak extension keren
  • Install extension "Flutter" dan "Dart" dari marketplace VS Code
• Android Studio
  • Lebih berat tapi fitur lengkap, terutama untuk emulator
  • Plugin Flutter dan Dart bisa diinstall dari menu Plugin

Kamu bisa pilih salah satu, atau install dua-duanya juga boleh.

Membuat Project Flutter Pertama

Sekarang saatnya kita bikin project Flutter pertama kita. Biar semangat, kita kasih nama hello_world.

Langkah-langkah:

1. Buka terminal / command prompt
2. Ketik perintah berikut:

flutter create hello_world

Flutter akan membuat folder hello_world lengkap dengan struktur folder dan file standar aplikasi Flutter.

Struktur Folder Flutter

Setelah project dibuat, kamu akan melihat struktur seperti ini:

hello_world/
├── android/           // Kode platform Android
├── ios/               // Kode platform iOS
├── lib/               // Tempat utama kita ngoding
│   └── main.dart      // Titik masuk aplikasi
├── test/              // Unit testing
├── pubspec.yaml       // Konfigurasi dependencies

Menjalankan Aplikasi

1. Buka folder hello_world di VS Code atau Android Studio
2. Jalankan emulator Android / iOS, atau colok HP langsung via USB (pastikan USB debugging aktif)
3. Klik tombol Run, atau jalankan di terminal:

flutter run

Voila! Aplikasi default Flutter akan tampil di emulator / HP kamu, lengkap dengan tampilan counter yang bisa diklik.

Penjelasan File main.dart

Yuk kita bahas sedikit isi dari file main.dart:

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

• main() adalah titik masuk aplikasi Flutter
• runApp(MyApp()) menjalankan widget utama kita
• MaterialApp adalah widget pembungkus dengan gaya Material Design
• MyHomePage adalah tampilan halaman utama aplikasi

Kamu bisa mulai bereksperimen dengan mengubah teks, warna, dan tampilan di MyHomePage.

Kesimpulan

Di hari pertama ini kita sudah belajar banyak:

• Apa itu Flutter dan kelebihannya
• Cara install Flutter SDK dan setup IDE
• Bikin dan jalankan project Flutter pertama

Besok kita akan lanjut ngoprek lebih dalam tentang widget, layout, dan mulai bikin tampilan aplikasi sederhana. Semangat terus ya! Jangan ragu untuk eksplorasi dan coba-coba, karena belajar ngoding itu paling seru kalau langsung praktik.

Sampai jumpa di hari kedua!