Pembelajaran konsep CRUD SQLite di Flutter Web (seperti Zapp.run)

Untuk dijalankan di web Flutter seperti Zapp.run, SQLite tidak bisa langsung digunakan, karena SQLite adalah database native yang hanya berjalan di Android, iOS, atau desktop, bukan di web browser.

Namun, untuk pembelajaran konsep CRUD di Flutter Web (seperti Zapp.run), kamu bisa mensimulasikan database SQLite dengan List lokal (in-memory) agar siswa tetap bisa belajar proses Create, Read, Update, Delete.

---

✅ Solusi: CRUD Simulasi Tanpa SQLite (untuk Web Flutter seperti Zapp.run)

Berikut adalah contoh kode Flutter CRUD tanpa SQLite, tapi berperilaku seperti SQLite, cocok untuk pembelajaran di Zapp.run:

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: 'CRUD Flutter Web',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CrudPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<CrudPage> createState() => _CrudPageState();
}

class _CrudPageState extends State<CrudPage> {
  final TextEditingController _controller = TextEditingController();
  List<String> _items = [];
  int? _editingIndex;

  void _createItem(String value) {
    setState(() {
      _items.add(value);
      _controller.clear();
    });
  }

  void _updateItem(String value) {
    setState(() {
      if (_editingIndex != null) {
        _items[_editingIndex!] = value;
        _editingIndex = null;
        _controller.clear();
      }
    });
  }

  void _deleteItem(int index) {
    setState(() {
      _items.removeAt(index);
    });
  }

  void _startEdit(int index) {
    setState(() {
      _controller.text = _items[index];
      _editingIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CRUD Sederhana (Simulasi SQLite)'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: const InputDecoration(labelText: 'Masukkan data'),
            ),
            const SizedBox(height: 10),
            Row(
              children: [
                ElevatedButton(
                  onPressed: () {
                    if (_editingIndex == null) {
                      _createItem(_controller.text);
                    } else {
                      _updateItem(_controller.text);
                    }
                  },
                  child: Text(_editingIndex == null ? 'Tambah' : 'Update'),
                ),
                const SizedBox(width: 10),
                if (_editingIndex != null)
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        _editingIndex = null;
                        _controller.clear();
                      });
                    },
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.grey),
                    child: const Text('Batal'),
                  )
              ],
            ),
            const SizedBox(height: 20),
            Expanded(
              child: ListView.builder(
                itemCount: _items.length,
                itemBuilder: (_, index) => Card(
                  child: ListTile(
                    title: Text(_items[index]),
                    trailing: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        IconButton(
                          icon: const Icon(Icons.edit, color: Colors.orange),
                          onPressed: () => _startEdit(index),
                        ),
                        IconButton(
                          icon: const Icon(Icons.delete, color: Colors.red),
                          onPressed: () => _deleteItem(index),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

---

💡 Penjelasan Singkat:

Fungsi	Penjelasan
Create	Menambahkan data ke list _items
Read	Menampilkan data dalam ListView
Update	Mengubah data yang sudah ada
Delete	Menghapus data dari list

---

📚 Pembelajaran Lanjutan

Untuk materi pembelajaran lebih lanjut:

• Di Android Studio ➜ bisa gunakan SQLite asli dengan package sqflite.

• Di Flutter Web ➜ bisa gunakan Firestore (Firebase) atau localStorage (simulasi).

InsyaAlloh postingan selanjutnya nanti akan coba versi SQLite asli untuk Android/iOS, tunggu ya.

Salam : Redaksi