List

create a Flutter UI for managing a List of Items using a Wrap widget for layout, Card for individual items, and CRUD (Create, Read, Update, Delete) operations.

We will apply the following:

  1. Create: Add new data using a TextField and Button.

  2. Read: Display data using Wrap and Card in 3 columns.

  3. Update: Edit data using a built-in popup dialog.

  4. Delete: Remove data using a delete icon.

File Structure

features/
│
└── data_structure/
    └── list/
        ├── components/
        │   └── list_crud_component.dart  # Main UI Component
        └── screen/
            └── list_crud_screen.dart     # Main Screen

1. Create the List Component

This component will contain the CRUD logic and UI.

File: list_crud_component.dart

import 'package:flutter/material.dart';

class ListCrudComponent extends StatefulWidget {
  const ListCrudComponent({Key? key}) : super(key: key);

  @override
  State<ListCrudComponent> createState() => _ListCrudComponentState();
}

class _ListCrudComponentState extends State<ListCrudComponent> {
  // List of Maps to store data
  List<Map<String, dynamic>> items = [];
  final TextEditingController _nameController = TextEditingController();

  // Add a new item
  void addItem() {
    if (_nameController.text.isNotEmpty) {
      setState(() {
        items.add({"name": _nameController.text});
        _nameController.clear();
      });
    }
  }

  // Update an item
  void updateItem(int index) {
    _nameController.text = items[index]["name"];
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("Update Item"),
          content: TextField(
            controller: _nameController,
            decoration: const InputDecoration(labelText: "Name"),
          ),
          actions: [
            TextButton(
              onPressed: () {
                setState(() {
                  items[index]["name"] = _nameController.text;
                  _nameController.clear();
                });
                Navigator.pop(context);
              },
              child: const Text("Update"),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text("Cancel"),
            ),
          ],
        );
      },
    );
  }

  // Delete an item
  void deleteItem(int index) {
    setState(() {
      items.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Input field and button
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              Expanded(
                child: TextField(
                  controller: _nameController,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: "Enter Item Name",
                  ),
                ),
              ),
              const SizedBox(width: 8),
              ElevatedButton(
                onPressed: addItem,
                child: const Text("Add"),
              ),
            ],
          ),
        ),
        const SizedBox(height: 8),

        // Wrap to display items
        Expanded(
          child: SingleChildScrollView(
            child: Wrap(
              spacing: 10,
              runSpacing: 10,
              children: List.generate(items.length, (index) {
                return SizedBox(
                  width: MediaQuery.of(context).size.width / 3 - 20, // 3 Columns
                  child: Card(
                    elevation: 4,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            items[index]["name"],
                            style: const TextStyle(
                                fontSize: 18, fontWeight: FontWeight.bold),
                          ),
                          const SizedBox(height: 8),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              IconButton(
                                onPressed: () => updateItem(index),
                                icon: const Icon(Icons.edit, color: Colors.blue),
                              ),
                              IconButton(
                                onPressed: () => deleteItem(index),
                                icon: const Icon(Icons.delete, color: Colors.red),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              }),
            ),
          ),
        ),
      ],
    );
  }
}

2. Create the Screen

This file will render the main screen and include the ListCrudComponent.

File: list_crud_screen.dart

import 'package:flutter/material.dart';
import '../components/list_crud_component.dart';

class ListCrudScreen extends StatelessWidget {
  const ListCrudScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("List CRUD Operations"),
        centerTitle: true,
      ),
      body: const Padding(
        padding: EdgeInsets.all(8.0),
        child: ListCrudComponent(),
      ),
    );
  }
}

3. Main Entry Point

Load the screen in the main.dart file.

File: main.dart

import 'package:flutter/material.dart';
import 'features/data_structure/list/screen/list_crud_screen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter List CRUD',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ListCrudScreen(),
    );
  }
}

  1. Create:

    • Add an item using a TextField and Add button.

    • Items are appended to the List<Map>.

  2. Read:

    • Items are displayed in a Wrap widget with 3 columns.

    • Each item is shown in a Card with the item name.

  3. Update:

    • Clicking the edit icon opens an AlertDialog.

    • The selected item’s name is updated.

  4. Delete:

    • Clicking the delete icon removes the item from the list.

Output

  1. Input Field and Add Button:

    • Users can input a name and add it to the list.

  2. Cards with 3 Columns:

    • Each card displays the name and has Edit and Delete buttons.

  3. Popup for Edit:

    • Allows editing the existing name.

  4. Dynamic Deletion:

    • Removes items in real-time.

Updated on
List of Maps
Maps