1. Pendahuluan

Flutter adalah framework open-source dari Google yang digunakan untuk membuat aplikasi multiplatform (Android, iOS, Web, Desktop) dengan satu basis kode.

Aplikasi Notes App atau aplikasi catatan adalah contoh sederhana tapi bermanfaat untuk belajar Flutter, karena di dalamnya kita akan belajar:

• Menyimpan data sementara dalam aplikasi
• Menggunakan input TextField
• Menampilkan data dengan ListView
• Menambahkan dan menghapus catatan

2. Persiapan Awal

Sebelum mulai coding, pastikan:

• Install Flutter SDK → Download dari flutter.dev
• Install VS Code (disarankan untuk pemula) + extension Flutter dan Dart
• Jalankan flutter doctor di terminal untuk memastikan setup sudah benar

• Buat project Flutter baru

3. Struktur Aplikasi Notes App

Fitur sederhana yang akan kita buat:

• Tambah catatan
• Tampilkan daftar catatan
• Hapus catatan

Desain UI sederhana:

• AppBar dengan judul Notes App
• Input TextField + tombol tambah
• Daftar catatan ditampilkan dalam ListView

4. Menulis Kode Program

Buka file lib/main.dart dan ganti isinya dengan kode berikut:

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: 'Notes App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: const NotesPage(),
    );
  }
}

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

  @override
  State<NotesPage> createState() => _NotesPageState();
}

class _NotesPageState extends State<NotesPage> {
  final List<String> _notes = [];
  final TextEditingController _controller = TextEditingController();

  void _addNote() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _notes.add(_controller.text);
        _controller.clear();
      });
    }
  }

  void _deleteNoteAt(int index) {
    setState(() {
      _notes.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Notes App"),
        backgroundColor: Colors.blue,
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      hintText: "Tulis catatan...",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _addNote,
                  child: const Text("Tambah"),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _notes.length,
              itemBuilder: (context, index) {
                return Card(
                  child: ListTile(
                    title: Text(_notes[index]),
                    trailing: IconButton(
                      icon: const Icon(Icons.delete, color: Colors.red),
                      onPressed: () => _deleteNoteAt(index),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

5. Menjalankan Aplikasi

Jika ingin menjalankan di Chrome (Web):

6. Uji Coba Aplikasi

• Ketik catatan di TextField lalu klik Tambah → catatan muncul di daftar
• Klik tombol delete → catatan akan terhapus

7. Pengembangan Lanjutan

Setelah aplikasi dasar jadi, kamu bisa kembangkan lagi:

• Menyimpan data secara permanen dengan SharedPreferences atau SQLite
• Menambahkan fitur Edit catatan
• Mendesain tampilan dengan tema yang lebih modern (misalnya pakai warna pastel atau dark mode)

8. Kesimpulan

Dalam tutorial ini, kita sudah belajar:

• Membuat project Flutter baru
• Menggunakan TextField dan ListView
• Menambah dan menghapus catatan