Introduction to Flutter

Flutter adalah UI toolkit open-source dari Google untuk membuat aplikasi mobile, web, dan desktop yang cantik dan terkompilasi secara native dari satu codebase. Flutter dibuat dengan bahasa pemrograman Dart, menjadikannya pilihan modern untuk pengembangan lintas platform.

📚 Table of Contents

---

Apa itu Flutter?

Flutter adalah framework UI yang memungkinkan Anda membangun aplikasi multi-platform yang cepat dan indah. Berikut beberapa karakteristik utamanya:

• Satu Codebase: Kembangkan aplikasi untuk Android, iOS, web, dan desktop dari satu basis kode.
• Hot Reload: Fitur revolusioner yang memungkinkan Anda melihat perubahan kode secara instan tanpa kehilangan state aplikasi.
• Widget: Semua yang ada di Flutter adalah widget, mulai dari tata letak hingga teks dan tombol, menjadikannya sangat fleksibel.
• Kompatibel Native: Flutter mengompilasi kode Anda langsung ke kode ARM native (untuk mobile), memastikan performa yang cepat.

---

Mengapa Belajar Flutter?

🚀 Sangat Efisien

• Kembangkan aplikasi untuk berbagai platform sekaligus, menghemat waktu dan sumber daya.
• Fitur Hot Reload mempercepat proses pengembangan.

🎨 UI yang Indah & Fleksibel

• Kustomisasi UI hingga ke detail terkecil dengan beragam widget bawaan.
• UI yang dibuat dengan Flutter memiliki tampilan dan nuansa (feel) yang sama di semua platform.

💼 Peluang Karir Tinggi

• Flutter berkembang pesat dan permintaan developer Flutter terus meningkat.
• Digunakan oleh perusahaan seperti Google, Alibaba, dan BMW.

⚙️ Didukung Google

• Flutter didukung penuh oleh Google, menjamin pembaruan dan pengembangan yang berkelanjutan.
• Komunitas yang besar dan ekosistem yang kaya.

---

Installation Guide

Untuk memulai pengembangan dengan Flutter, Anda harus menginstal Flutter SDK dan dependensinya.

📥 Download Flutter SDK

Kunjungi website resmi Flutter: flutter.dev/docs/get-started/install

---

Getting Started

Setelah menginstall Flutter SDK, Anda dapat mulai membuat program dengan cara:

1. Text Editor + Terminal

Gunakan editor seperti Visual Studio Code dengan plugin Flutter dan Dart. Buka terminal di VS Code untuk menjalankan perintah.

2. 🆚 IDE (Intergrated Development Environment)

Rekomendasi IDE untuk Pemula:

• - Visual Studio Code
• - Android Studio
• - Xcode

---

Your First Flutter App

Mari kita buat aplikasi Flutter pertama!

Membuat Project baru

flutter create my_first_app

atau

flutter create --org com.namaorganisasi my_first_app

Jalankan Aplikasi

Masuk ke dalam direktori project dan jalankan aplikasi

cd my_first_app
flutter run

Flutter akan mengompilasi dan menjalankan aplikasi demo di emulator atau perangkat fisik Anda

---

Struktur Folder

Struktur folder yang akan dibuat pada Project App Flutter:

my_first_app/
├── android/                 # Konfigurasi khusus Android
├── ios/                     # Konfigurasi khusus iOS
├── lib/                     # Kode Dart utama aplikasi
│   └── main.dart           # File entry point aplikasi
├── test/                    # File test untuk aplikasi
│   └── widget_test.dart    # Test widget default
├── web/                     # Konfigurasi khusus Web
├── windows/                 # Konfigurasi khusus Windows
├── linux/                   # Konfigurasi khusus Linux
├── macos/                   # Konfigurasi khusus macOS
├── .gitignore              # File yang diabaikan Git
├── .metadata               # Metadata project Flutter
├── analysis_options.yaml   # Konfigurasi analisis kode
├── pubspec.yaml            # Dependensi dan konfigurasi project
├── pubspec.lock            # Lock file untuk dependensi
└── README.md               # Dokumentasi project

Penjelasan Folder Penting:

• 📁 lib/: Folder utama yang berisi semua kode Dart aplikasi Anda
• 📄 lib/main.dart: File entry point aplikasi, tempat aplikasi dimulai
• 📁 android/ & ios/: Konfigurasi platform-specific untuk Android dan iOS
• 📄 pubspec.yaml: File konfigurasi yang mendefinisikan dependensi, assets, dan metadata project
• 📁 test/: Folder untuk menulis unit test dan widget test

Modifikasi kode

Buka file lib/main.dart di IDE Anda. Anda bisa memodifikasi kode untuk mengubah tampilan aplikasi.

// lib/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(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello Flutter!'),
        ),
        body: const Center(
          child: Text('Selamat datang di dunia Flutter! 🚀'),
        ),
      ),
    );
  }
}

Setelah memodifikasi, simpan file dan amati keajaiban Hot Reload! Aplikasi Anda akan diperbarui secara instan