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?
- Add → User types Name + Email → Click “Add Contact” → Saved into a
List
. - Update → Click Edit → Opens a dialog → Change values → Saved.
- Delete → Click Delete → Removes contact.
- Contacts are displayed in a ListView.