Contoh Aplikasi CRUD sederhana menggunakan Dart dengan Flutter Web

 Berikut adalah contoh aplikasi CRUD sederhana menggunakan **Dart dengan Flutter Web** (yang bisa kamu deploy ke [https://idx.dev](https://idx.dev)).

### Fitur:

- Menambahkan data

- Menampilkan data

- Mengedit data

- Menghapus data

### Struktur File:

Untuk project Flutter Web di IDX, cukup satu file `main.dart`.

---

### `main.dart`

```dart

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class Item {

  String name;

  Item(this.name);

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'CRUD Flutter Web',

      home: CRUDPage(),

    );

  }

}

class CRUDPage extends StatefulWidget {

  @override

  _CRUDPageState createState() => _CRUDPageState();

}

class _CRUDPageState extends State<CRUDPage> {

  final List<Item> _items = [];

  final TextEditingController _controller = TextEditingController();

  int? _editingIndex;

  void _addItem() {

    final name = _controller.text.trim();

    if (name.isEmpty) return;

    setState(() {

      if (_editingIndex == null) {

        _items.add(Item(name));

      } else {

        _items[_editingIndex!] = Item(name);

        _editingIndex = null;

      }

      _controller.clear();

    });

  }

  void _editItem(int index) {

    setState(() {

      _controller.text = _items[index].name;

      _editingIndex = index;

    });

  }

  void _deleteItem(int index) {

    setState(() {

      _items.removeAt(index);

      _controller.clear();

      _editingIndex = null;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('CRUD Flutter Web')),

      body: Padding(

        padding: EdgeInsets.all(16),

        child: Column(

          children: [

            TextField(

              controller: _controller,

              decoration: InputDecoration(

                labelText: 'Nama Item',

              ),

            ),

            SizedBox(height: 8),

            ElevatedButton(

              onPressed: _addItem,

              child: Text(_editingIndex == null ? 'Tambah' : 'Simpan'),

            ),

            SizedBox(height: 16),

            Expanded(

              child: ListView.builder(

                itemCount: _items.length,

                itemBuilder: (context, index) {

                  return ListTile(

                    title: Text(_items[index].name),

                    trailing: Row(

                      mainAxisSize: MainAxisSize.min,

                      children: [

                        IconButton(

                          icon: Icon(Icons.edit),

                          onPressed: () => _editItem(index),

                        ),

                        IconButton(

                          icon: Icon(Icons.delete),

                          onPressed: () => _deleteItem(index),

                        ),

                      ],

                    ),

                  );

                },

              ),

            ),

          ],

        ),

      ),

    );

  }

}

```

---

### Cara Menjalankan di IDX:

1. Buka [https://idx.dev](https://idx.dev).

2. Buat project baru dengan template Flutter Web.

3. Ganti isi `main.dart` dengan kode di atas.

4. Jalankan dengan tombol ▶️ (Run).

Kalau mau ditambah fitur seperti penyimpanan lokal atau pakai database online (Firebase, Supabase, dll), tinggal bilang aja ya!