Aplikasi CRUD di web https://idx.dev/ dengan dart flutter

Tentu! Saya bisa bantu buatkan contoh aplikasi CRUD sederhana menggunakan Dart di platform https://idx.dev (web-based IDE milik Flutter). Kita akan membuat aplikasi web Flutter dengan kemampuan CRUD (Create, Read, Update, Delete) menggunakan List sebagai penyimpanan data sementara (tanpa database terlebih dahulu, supaya bisa langsung jalan di web).

Studi Kasus: Daftar Catatan (Notes)

---

Langkah-langkah:

1. Buka https://idx.dev.

2. Pilih New Project > Flutter Web.

3. Ganti isi file lib/main.dart dengan kode berikut:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class Note {
  String title;
  String content;

  Note({
    required this.title,
    required this.content,
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web CRUD',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NotePage(),
    );
  }
}

class NotePage extends StatefulWidget {
  @override
  _NotePageState createState() => _NotePageState();
}

class _NotePageState extends State<NotePage> {
  List<Note> notes = [];
  final titleController = TextEditingController();
  final contentController = TextEditingController();
  int? editingIndex;

  void clearFields() {
    titleController.clear();
    contentController.clear();
    editingIndex = null;
  }

  void saveNote() {
    final title = titleController.text;
    final content = contentController.text;

    if (title.isEmpty || content.isEmpty) return;

    setState(() {
      if (editingIndex == null) {
        notes.add(Note(title: title, content: content));
      } else {
        notes[editingIndex!] = Note(title: title, content: content);
      }
    });

    clearFields();
  }

  void editNote(int index) {
    setState(() {
      editingIndex = index;
      titleController.text = notes[index].title;
      contentController.text = notes[index].content;
    });
  }

  void deleteNote(int index) {
    setState(() {
      notes.removeAt(index);
    });
    clearFields();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Catatan (CRUD)'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: titleController,
              decoration: InputDecoration(labelText: 'Judul'),
            ),
            TextField(
              controller: contentController,
              decoration: InputDecoration(labelText: 'Isi'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: saveNote,
              child: Text(editingIndex == null ? 'Tambah' : 'Update'),
            ),
            Divider(),
            Expanded(
              child: ListView.builder(
                itemCount: notes.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(notes[index].title),
                    subtitle: Text(notes[index].content),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton(
                          icon: Icon(Icons.edit),
                          onPressed: () => editNote(index),
                        ),
                        IconButton(
                          icon: Icon(Icons.delete),
                          onPressed: () => deleteNote(index),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

Penjelasan Singkat

• Aplikasi menyimpan catatan (judul + isi) dalam list.

• Bisa tambah, edit, hapus catatan.

• Semua berjalan langsung di browser (tanpa backend).

Kalau kamu ingin saya bantu lanjutkan ke versi yang pakai database seperti Firebase atau SQLite di platform lain, tinggal bilang aja ya! Mau pakai UI lebih keren juga bisa.

Sumber: https://chatgpt.com/