Creating a Simple Todo List with Flutter

12.12.2023 — Flutter, Mobile Development, Dart — 1 min read

In this tutorial, we will walk through creating a basic todo list application using Flutter, a popular open-source UI software development kit created by Google. This simple project is an excellent way to get acquainted with the fundamentals of building mobile applications using Flutter and Dart.

Setting Up the Project

First, make sure you have Flutter installed. If not, head over to the official Flutter website (https://flutter.dev/) and follow the installation instructions based on your operating system.

Once Flutter is installed, create a new Flutter project using your preferred development environment, whether it's Android Studio, Visual Studio Code, or any other IDE that supports Flutter development.

Designing the User Interface

Now, let's begin by designing the user interface for our todo list application. We'll use a ListView to display the list of tasks and a FloatingActionButton to add new tasks.

Below is the code snippet for the main.dart file that contains the layout for our todo list application:

1import 'package:flutter/material.dart';
2
3void main() {
4  runApp(TodoApp());
5}
6
7class TodoApp extends StatelessWidget {
8  @override
9  Widget build(BuildContext context) {
10    return MaterialApp(
11      title: 'Todo List',
12      home: TodoList(),
13    );
14  }
15}
16
17class TodoList extends StatefulWidget {
18  @override
19  createState() => _TodoListState();
20}
21
22class _TodoListState extends State<TodoList> {
23  // Implement state, we'll do this below
24}

Managing Todo Items

To manage the todo items, we'll use a ListTile inside a ListView. Each ListTile represents a task, and users can add new tasks using the FloatingActionButton. Let's add the code for managing the todo items within the _TodoListState class:

1List<String> _todos = [];
2
3Widget _buildTodoList() {
4  return ListView.builder(
5    itemBuilder: (context, index) {
6      if (index < _todos.length) {
7        return _buildTodoItem(_todos[index]);
8      }
9    },
10  );
11}
12
13Widget _buildTodoItem(String todoText) {
14  return ListTile(
15    title: Text(todoText),
16  );
17}
18
19void _addTodo() {
20  setState(() {
21    _todos.add('New Task');
22  });
23}

Putting It All Together

Now that we have our UI and todo item management set up, let's put everything together within the _TodoListState class:

1class _TodoListState extends State<TodoList> {
2  List<String> _todos = [];
3
4  @override
5  Widget build(BuildContext context) {
6    return Scaffold(
7      appBar: AppBar(title: Text('Todo List')),
8      body: _buildTodoList(),
9      floatingActionButton: FloatingActionButton(
10        onPressed: _addTodo,
11        tooltip: 'Add task',
12        child: Icon(Icons.add),
13      ),
14    );
15  }
16
17  Widget _buildTodoList() {
18    return ListView.builder(
19      itemBuilder: (context, index) {
20        if (index < _todos.length) {
21          return _buildTodoItem(_todos[index]);
22        }
23      },
24    );
25  }
26
27  Widget _buildTodoItem(String todoText) {
28    return ListTile(
29      title: Text(todoText),
30    );
31  }
32
33  void _addTodo() {
34    setState(() {
35      _todos.add('New Task');
36    });
37  }
38}

That's it! You've just built a simple todo list application using Flutter. You can now run the application on an emulator or physical device to see your creation in action.