Building a Flutter Todo App: A Step-by-
Step Guide
Step 1: Setting Up the Project
1. Open your terminal and create a new Flutter project:
flutter create todo_app
cd todo_app
2. Open the project in your preferred IDE.
3. Replace the contents of lib/[Link] with the following:
import 'package:flutter/[Link]';
void main() {
runApp(const TodoApp());
}
class TodoApp extends StatelessWidget {
const TodoApp({[Link]});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: TodoPage(),
);
}
}
class TodoPage extends StatefulWidget {
const TodoPage({Key? key}) : super(key: key);
@override
State<TodoPage> createState() => _TodoPageState();
}
class _TodoPageState extends State<TodoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Todo List'),
centerTitle: true,
),
body: const Center(
child: Text('Todo List App'),
),
);
}
}
This sets up the basic structure of our app with a MaterialApp and a Scaffold.
Run the app to see a basic screen with an app bar and centered text.
Step 2: Adding Todo Input
1. Add state variables to _TodoPageState:
class _TodoPageState extends State<TodoPage> {
final List<String> _todos = [];
final TextEditingController _todoController =
TextEditingController();
// ... existing build method
}
2. Create an input field and add button:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Todo List'),
centerTitle: true,
),
body: Column(
children: [
Padding(
padding: const [Link](8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _todoController,
decoration: const InputDecoration(
hintText: 'Enter a todo',
),
),
),
IconButton(
icon: const Icon([Link]),
onPressed: () {
// We'll implement this next
},
),
],
),
),
],
),
);
}
Run the app to see the input field and add button.
Step 3: Implementing Todo Addition
1. Add the _addTodo method to _TodoPageState:
void _addTodo() {
setState(() {
if (_todoController.[Link]) {
_todos.add(_todoController.text);
_todoController.clear();
}
});
}
2. Update the onPressed of the add button:
IconButton(
icon: const Icon([Link]),
onPressed: _addTodo,
),
3. Display the list of todos:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Todo List'),
centerTitle: true,
),
body: Column(
children: [
// ... existing input row
Expanded(
child: [Link](
itemCount: _todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_todos[index]),
);
},
),
),
],
),
);
}
Run the app. You can now add todos and see them listed.
Step 4: Adding Todo Removal
1. Update the ListTile in the [Link]:
ListTile(
title: Text(_todos[index]),
trailing: IconButton(
icon: const Icon([Link]),
onPressed: () => _removeTodo(index),
),
)
2. Add the _removeTodo method:
void _removeTodo(int index) {
setState(() {
_todos.removeAt(index);
});
}
Run the app. You can now add and remove todos.
Step 5: Adding Date and Time
1. Update the state variables in _TodoPageState:
final List<Map<String, String>> _todos = [];
final TextEditingController _todoController =
TextEditingController();
final TextEditingController _dateTimeController =
TextEditingController();
2. Create a method to select date and time:
Future<void> _selectDateTime(BuildContext context) async {
DateTime? pickedDate = await showDatePicker(
context: context,
initialDate: [Link](),
firstDate: [Link](),
lastDate: DateTime(2101),
);
if (pickedDate != null) {
TimeOfDay? pickedTime = await showTimePicker(
context: context,
initialTime: [Link](),
);
if (pickedTime != null) {
DateTime pickedDateTime = DateTime(
[Link],
[Link],
[Link],
[Link],
[Link],
);
_dateTimeController.text =
'${[Link]}/${[Link]}/${[Link]}
'
'at ${[Link] % 12 == 0 ? 12 :
[Link] % 12}:'
'${[Link]().padLeft(2, '0')} '
'${[Link] < 12 ? 'am' : 'pm'}';
}
}
}
3. Update the input row in the build method:
Padding(
padding: const [Link](8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _todoController,
decoration: const InputDecoration(
hintText: 'Enter a todo',
),
),
),
const SizedBox(width: 8),
Expanded(
child: GestureDetector(
onTap: () => _selectDateTime(context),
child: AbsorbPointer(
child: TextField(
controller: _dateTimeController,
decoration: const InputDecoration(
hintText: 'Select date and time',
),
),
),
),
),
IconButton(
icon: const Icon([Link]),
onPressed: _addTodo,
),
],
),
)
4. Update the _addTodo method:
void _addTodo() {
setState(() {
if (_todoController.[Link] &&
_dateTimeController.[Link]) {
_todos.add({
'todo': _todoController.text,
'dateTime': _dateTimeController.text,
});
_todoController.clear();
_dateTimeController.clear();
}
});
}
5. Update the [Link]:
[Link](
itemCount: _todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_todos[index]['todo']!),
subtitle: Text(_todos[index]['dateTime']!),
trailing: IconButton(
icon: const Icon([Link]),
onPressed: () => _removeTodo(index),
),
);
},
)
Run the app. You can now add todos with dates and times, and remove them.
