Create, Read, Update, Delete data store data inside the app memory (List)

Step 1: Store Data in a List

We’ll create a simple Contact Manager where you can:
Add contact
Update contact
Delete contact


Full Example: Contact Manager App

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

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

  @override
  State<ContactManager> createState() => _ContactManagerState();
}

class _ContactManagerState extends State<ContactManager> {
  final TextEditingController nameController = TextEditingController();
  final TextEditingController emailController = TextEditingController();

  List<Map<String, String>> contacts = [];

  // Add Contact
  void addContact() {
    setState(() {
      contacts.add({
        "name": nameController.text,
        "email": emailController.text,
      });
      nameController.clear();
      emailController.clear();
    });
  }

  // Update Contact
  void updateContact(int index) {
    nameController.text = contacts[index]["name"]!;
    emailController.text = contacts[index]["email"]!;

    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text("Update Contact"),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(controller: nameController, decoration: const InputDecoration(labelText: "Name")),
            TextField(controller: emailController, decoration: const InputDecoration(labelText: "Email")),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () {
              setState(() {
                contacts[index] = {
                  "name": nameController.text,
                  "email": emailController.text,
                };
                nameController.clear();
                emailController.clear();
              });
              Navigator.pop(context);
            },
            child: const Text("Update"),
          ),
        ],
      ),
    );
  }

  // Delete Contact
  void deleteContact(int index) {
    setState(() {
      contacts.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Contact Manager")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // Input Fields
            TextField(
              controller: nameController,
              decoration: const InputDecoration(labelText: "Name"),
            ),
            TextField(
              controller: emailController,
              decoration: const InputDecoration(labelText: "Email"),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: addContact,
              child: const Text("Add Contact"),
            ),

            const SizedBox(height: 20),

            // Contact List
            Expanded(
              child: ListView.builder(
                itemCount: contacts.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      title: Text(contacts[index]["name"]!),
                      subtitle: Text(contacts[index]["email"]!),
                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          IconButton(
                            icon: const Icon(Icons.edit, color: Colors.blue),
                            onPressed: () => updateContact(index),
                          ),
                          IconButton(
                            icon: const Icon(Icons.delete, color: Colors.red),
                            onPressed: () => deleteContact(index),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

What Happens Here?

  1. Add → User types Name + Email → Click “Add Contact” → Saved into a List.
  2. Update → Click Edit → Opens a dialog → Change values → Saved.
  3. Delete → Click Delete → Removes contact.
  4. Contacts are displayed in a ListView.



Leave a Reply