Apa Itu Flutter?

Flutter adalah SDK (Software Development Kit) open-source buatan Google yang memungkinkan kita membangun aplikasi berkinerja tinggi untuk Android, iOS, Web, hingga Desktop hanya dengan satu basis kode (single codebase).

Bahasa pemrograman yang digunakan oleh Flutter adalah Dart. Kolaborasi Flutter dan Dart ini bikin proses koding jadi sangat efisien, cepat, dan hasilnya terasa seperti aplikasi native!

Kenapa Harus Pakai Flutter?

• Single Codebase: Tulis kode sekali, bisa langsung di-deploy ke Android, iOS, Web, dan Desktop.
• Fitur Hot Reload: Mengubah tampilan UI hanya butuh hitungan detik tanpa perlu melakukan rebuild/restart aplikasi dari awal.
• Performa Tinggi: Kode dikompilasi langsung ke kode mesin (AOT compilation), sehingga performanya sangat responsif (hingga 60/120 FPS).
• Kaya Akan Widget: Flutter menyediakan ratusan widget bawaan Material Design (Android) dan Cupertino (iOS) yang siap pakai.
• Dukungan Ekosistem Luas: Dikembangkan langsung oleh Google dan didukung oleh komunitas global yang sangat aktif.

Cara Install Flutter di Linux (Ubuntu)

Buat Sobat pengguna Linux/Ubuntu, instalasi Flutter kini sangat mudah melalui Snap Store. Buka terminal lalu jalankan perintah berikut:

sudo snap install flutter --classic

Setelah instalasi selesai, cek kelengkapan dependensi dan status lingkungan Flutter Sobat dengan menjalankan perintah:

flutter doctor

Sistem akan memindai dependensi yang kurang (seperti Android Studio atau VS Code) dan memberikan petunjuk cara melengkapinya.

Membuat Proyek Flutter Pertama

Setelah persiapan lingkungan siap, mari kita jalankan perintah berikut untuk membuat proyek awal:

flutter create my_app
cd my_app
flutter run

Jika semua berjalan lancar, aplikasi contoh bawaan Flutter akan langsung tampil di emulator atau perangkat fisik Android/iOS milik Sobat!

Praktik: Membuat Aplikasi To-Do List Sederhana

Untuk memahami bagaimana Flutter mengelola data tampilan, mari buat aplikasi To-Do List sederhana menggunakan paket manajemen state populer, yaitu Provider.

1. Tambahkan Dependensi Provider

Jalankan perintah ini di terminal proyek Sobat untuk mengunduh package Provider:

flutter pub add provider

2. Buat Model State (todo_model.dart)

Buat file baru bernama todo_model.dart di dalam folder lib/, lalu isi dengan kode berikut:

import 'package:flutter/material.dart';

class TodoModel extends ChangeNotifier {
  final List<String> _todos = [];

  List<String> get todos => _todos;

  void addTodo(String todo) {
    if (todo.isNotEmpty) {
      _todos.add(todo);
      notifyListeners(); // Memperbarui tampilan secara otomatis saat ada data baru
    }
  }
}

3. Hubungkan State dengan UI (main.dart)

Buka file lib/main.dart dan ubah seluruh isinya menjadi seperti ini:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'todo_model.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TodoModel(),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TodoScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final controller = TextEditingController();

    return Scaffold(
      appBar: AppBar(title: const Text('To-Do List Flutter')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: controller,
                    decoration: const InputDecoration(
                      labelText: 'Tambah Tugas Baru',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () {
                    context.read<TodoModel>().addTodo(controller.text);
                    controller.clear();
                  },
                  child: const Text('Tambah'),
                ),
              ],
            ),
          ),
          Expanded(
            child: Consumer<TodoModel>(
              builder: (context, todoModel, child) {
                return ListView.builder(
                  itemCount: todoModel.todos.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      leading: const Icon(Icons.check_circle_outline),
                      title: Text(todoModel.todos[index]),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Jalankan kembali aplikasinya dengan menekan tombol Hot Reload (r) di terminal atau IDE Sobat, lalu coba ketikkan tugas dan tekan tombol Tambah. List tugas akan bertambah secara instan!