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

import 'package:flutter/material.dart';

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

class Item {
  String name;

  Item(this.name);
}

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 HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<Item> items = [];
  final TextEditingController controller = TextEditingController();
  int? editingIndex;

  void addItem() {
    if (controller.text.isEmpty) return;
    setState(() {
      if (editingIndex == null) {
        items.add(Item(controller.text));
      } else {
        items[editingIndex!] = Item(controller.text);
        editingIndex = null;
      }
      controller.clear();
    });
  }

  void editItem(int index) {
    setState(() {
      controller.text = items[index].name;
      editingIndex = index;
    });
  }

  void deleteItem(int index) {
    setState(() {
      items.removeAt(index);
      if (editingIndex == index) {
        controller.clear();
        editingIndex = null;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter CRUD Web'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: controller,
              decoration: InputDecoration(
                hintText: 'Masukkan nama item',
                suffixIcon: IconButton(
                  icon: const Icon(Icons.save),
                  onPressed: addItem,
                ),
              ),
              onSubmitted: (_) => addItem(),
            ),
            const SizedBox(height: 20),
            Expanded(
              child: items.isEmpty
                  ? const Center(child: Text('Belum ada data'))
                  : ListView.builder(
                      itemCount: items.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(items[index].name),
                          trailing: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              IconButton(
                                icon: const Icon(Icons.edit),
                                onPressed: () => editItem(index),
                              ),
                              IconButton(
                                icon: const Icon(Icons.delete),
                                onPressed: () => deleteItem(index),
                              ),
                            ],
                          ),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

Sumber : Chatgpt.com

Komentar

Posting Komentar

Postingan populer dari blog ini

Gambar
  Pengembangan Aplikasi Pemesanan Makanan “Kantin Bibi Ayam Goreng” Berbasis Flutter dengan Fitur Keranjang dan Integrasi WhatsApp Deskripsi Aplikasi Aplikasi Kantin Bibi Ayam Goreng adalah aplikasi pemesanan makanan digital sederhana berbasis Flutter. Tujuan aplikasi ini adalah mempermudah proses pemesanan menu makanan di lingkungan kantin dengan sistem yang cepat, praktis, dan langsung terhubung ke WhatsApp penjual. Aplikasi ini memiliki tampilan antarmuka sederhana namun modern, dilengkapi keranjang belanja, dialog konfirmasi, serta perhitungan total otomatis. Semua pemesanan dapat langsung dikirim ke WhatsApp menggunakan format pesan otomatis sehingga mempermudah penjual dalam menerima order. Tujuan Pengembangan Pengembangan aplikasi ini memiliki beberapa tujuan utama: Mengimplementasikan dasar-dasar Flutter seperti widget, state management, navigasi, dan UI layout. Membuat sistem pemesanan makanan digital yang mudah digunakan dan responsif. Menerapkan modu...
Baca selengkapnya

Arya Kegiatan Praktikum Mapel Kejuruan

Gambar
  Kegiatan Praktikum Mapel Kejuruan: Mengasah Kemampuan dan Mempersiapkan Masa Depan Pendidikan kejuruan merupakan salah satu aspek penting dalam sistem pendidikan di Indonesia. Salah satu cara terbaik untuk mempersiapkan siswa dalam menghadapi dunia kerja adalah melalui kegiatan praktikum yang dilakukan dalam mata pelajaran kejuruan. Kegiatan praktikum ini tidak hanya memberikan pengetahuan teoritis, tetapi juga keterampilan praktis yang sangat dibutuhkan di dunia profesional. Mengenal Pentingnya Praktikum dalam Mapel Kejuruan Mata pelajaran kejuruan (mapel kejuruan) di sekolah vokasi atau kejuruan memiliki fokus yang jelas pada pengembangan keterampilan teknis sesuai dengan bidang studi tertentu. Kegiatan praktikum merupakan inti dari pembelajaran kejuruan. Di sini, siswa tidak hanya belajar dari buku teks, tetapi juga mengalami langsung proses produksi atau kerja yang sesungguhnya, sesuai dengan jurusan yang mereka pilih. Misalnya, siswa jurusan teknik komputer akan berlatih mer...
Baca selengkapnya

aplikasi CRUD Flutter + MockAPI

Gambar
CRUD Flutter + MockAPI (Zapp Platform)  Pada project ini, saya membuat aplikasi CRUD (Create, Read, Update, Delete) menggunakan Flutter yang terhubung dengan MockAPI sebagai backend simulasi. Aplikasi ini dibangun dan dijalankan langsung melalui platform Zapp.run, sebuah layanan cloud IDE yang mendukung proyek Flutter tanpa perlu instalasi lokal. Fitur Aplikasi: ✅ Tambah Data: Menggunakan AlertDialog yang muncul saat tombol tambah ditekan. 📝 Edit Data: Mengedit data yang sudah ada melalui tombol ikon pensil. 🗑️ Hapus Data: Menghapus data menggunakan ikon tempat sampah. 🔄 Realtime Update: Data yang diubah langsung terlihat tanpa perlu refresh manual. 🌐 Integrasi dengan MockAPI: Backend dummy untuk keperluan testing API. Teknologi yang Digunakan: Flutter 3.7.3 (Beta) MockAPI.io untuk simulasi backend Zapp.run sebagai IDE dan platform hosting sementara HTTP Package (versi 0.13.6) untuk koneksi API Cuplikan Kode: showDialog(   context: context,   builder: (con...
Baca selengkapnya