CRUD Operation UI Simple

 import 'package:flutter/material.dart';

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserData(),
    );
  }
}

class UserData extends StatefulWidget {
  List<Map<String, String>> userdata = [];

  UserData({super.key});

  @override
  State<UserData> createState() => _UserDataState();
}

class _UserDataState extends State<UserData> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("User Data"),
      ),
      body: ListView.builder(
        itemCount: widget.userdata.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: const Icon(
              FontAwesomeIcons.user,
              size: 20,
            ),
            title: Text(
              widget.userdata[index]['userName']!,
              style: const TextStyle(fontSize: 35, color: Colors.red),
            ),
            subtitle: Text(
              widget.userdata[index]['Email']!,
              style: const TextStyle(fontSize: 20, color: Colors.blue),
            ),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  onPressed: () {
                    _updateDialog(context, index);
                  },
                  icon: const Icon(Icons.edit),
                ),
                IconButton(
                  onPressed: () {
                    _deleteItem(index);
                  },
                  icon: const Icon(Icons.delete),
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return _AddUserDataDialog(onAdd: _addUserData);
            },
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  void _addUserData(String userName, String email) {
    setState(() {
      widget.userdata.add({
        'userName': userName,
        'Email': email,
      });
    });
  }

  void _updateDialog(BuildContext context, int index) {
    TextEditingController uNameController =
        TextEditingController(text: widget.userdata[index]['userName']);
    TextEditingController emailController =
        TextEditingController(text: widget.userdata[index]['Email']);

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("Update User Data"),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextField(
                controller: uNameController,
                decoration: InputDecoration(
                  hintText: "Enter Name",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
              const SizedBox(height: 10),
              TextField(
                controller: emailController,
                decoration: InputDecoration(
                  hintText: "Enter Email",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
            ],
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  widget.userdata[index]['userName'] = uNameController.text;
                  widget.userdata[index]['Email'] = emailController.text;
                  Navigator.pop(context);
                });
              },
              child: const Text('Update'),
            ),
          ],
        );
      },
    );
  }

  void _deleteItem(int index) {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('Confirm Delete'),
          content: const Text('Are you sure you want to delete this user?'),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  widget.userdata.removeAt(index);
                });
                Navigator.pop(context);
              },
              child: const Text(
                'Delete',
                style: TextStyle(color: Colors.red),
              ),
            ),
          ],
        );
      },
    );
  }
}

class _AddUserDataDialog extends StatefulWidget {
  final Function(String, String) onAdd;

  const _AddUserDataDialog({super.key, required this.onAdd});

  @override
  __AddUserDataDialogState createState() => __AddUserDataDialogState();
}

class __AddUserDataDialogState extends State<_AddUserDataDialog> {
  TextEditingController uName = TextEditingController();
  TextEditingController email = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Add User Data'),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TextField(
            controller: uName,
            autofocus: true,
            textInputAction: TextInputAction.next,
            onSubmitted: (value) {
              FocusScope.of(context).nextFocus();
            },
            decoration: InputDecoration(
              hintText: "Enter Name",
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ),
          const SizedBox(height: 10),
          TextField(
            controller: email,
            textInputAction: TextInputAction.done,
            onSubmitted: (value) {
              widget.onAdd(uName.text, email.text);
              Navigator.pop(context);
            },
            decoration: InputDecoration(
              hintText: "Enter Email",
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ),
        ],
      ),
      actions: [
        TextButton(
          onPressed: () {
            widget.onAdd(uName.text, email.text);
            Navigator.pop(context);
          },
          child: const Text('Add'),
        ),
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('Cancel'),
        ),
      ],
    );
  }

  @override
  void dispose() {
    uName.dispose();
    email.dispose();
    super.dispose();
  }
}