How to create a to-do list in Flutter

Key takeaways:
Leverage Flutter's single codebase, a rich ecosystem with the pub package manager, and open-source nature for building visually appealing, cross-platform applications.
A to-do list is a dynamic feature for task management, allowing users to add, remove, and track tasks efficiently.
Use ListView.builder in Flutter to dynamically display a list of tasks, enabling seamless updates and scalable UI management.
Implement features like an AlertDialog for adding tasks and FloatingActionButton for quick task management, enhancing user interactivity.
To-do lists are practical in various real-life scenarios, such as project planning, event tracking, and personal task management, making them a versatile app feature.

Flutter is a widely used user-interface framework for building natively compiled mobile and web applications. It provides developers with creative freedom to create visually attractive applications by providing a variety of UI features.

Flutter is among the highly preferred frameworks because of its features, some of which are:

Single codebase: One set of code can be used across different platforms like Android and iOS.
Rick Ecosystem: Flutter has the pub package manager that offers a range of packages and plugins.
Open source: Continuous bug fixing and new feature additions make it a powerful and up-to-date framework.

What is a to-do list?

A to-do list is a simple feature that is used to manage tasks that are to be accomplished or kept as a reminder for memory ease. It contains a list of items, each with a different meaning and a unique name. We can dynamically add and remove the items from it as required to keep track of our progress.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  List<String> _todos = [];

  void _addTodo() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        String newTodo = "";
        return AlertDialog(
          title: Text("Add a new To-Do"),
          content: TextField(
            onChanged: (value) {
              newTodo = value;
            },
          ),
          actions: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  if (newTodo.isNotEmpty) {
                    _todos.add(newTodo);
                  }
                  Navigator.pop(context);
                });
              },
              child: Text("Add"),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Aesthetic To-Do List"),
        backgroundColor: Colors.purple,
      ),
      body: ListView.builder(
        itemCount: _todos.length,
        itemBuilder: (context, index) {
          return Card(
            elevation: 4,
            margin: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
            child: ListTile(
              title: Text(
                _todos[index],
                style: TextStyle(fontSize: 18),
              ),
              trailing: IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {
                  setState(() {
                    _todos.removeAt(index);
                  });
                },
              ),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addTodo,
        backgroundColor: Colors.purple,
        child: Icon(Icons.add),
      ),
    );
  }
}

Create a to-do list application

Lines 17–19: Define the TodoListScreen() class that extends the StatefulWidget class and create a _TodoLisScreenState() instance.
Lines 22–23: Define the _TodoListScreenState() class that represents TodoListScreen state and hold a list of _todos.
Lines 25–32: Create an _addTodo() method that shows an alert to add a new to-do item using showDialog() method and take the content input in TestField.
Lines 33–34: The content input triggers onChange, and the new value is set on the newTodo attribute.
Lines 37–47: Create an ElevatedButton() method in the actions that adds the newTodo item to the _todo list and closes the dialog box.
Lines 56–57: Create the app UI in the build method that returns a Scaffold widget containing the basic structure.
Lines 58–60: Set the appBar property to an AppBar widget, which specifies the a title and the backgroundColor.
Lines 62–64: Set the body to ListView.builder widget that dynamically creates a list of items and shows them on screen.
Lines 64–77: Set the title, text styling, and font, and delete button for each item Card in the list.

Summary

Flutter is a user-friendly framework that helps developers to create cross-platform applications with an attractive user interface. We can create different widgets and assign functionalities to create a responsive application.

Ready to build stunning Android apps? Beginning Flutter: Android Mobile App Development takes you from designing contact profiles to integrating APIs and publishing your app, all with Flutter's powerful UI framework.

Note: Learn more about Flutter in the following Answers:
How to create a counter in Flutter
How to generate gradient background in Flutter

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How do you create a list item in Flutter?

Below is a step-by-step guide on how to create a list item in a Flutter application:

Step 1: Ensure Flutter is installed on your system.
Step 2: Create a new Flutter project.
Step 3: Define a StatefulWidget to manage the state of your list.
Step 4: Create a list variable to hold the items (e.g., to-do items).
Step 5: Create a method that opens a dialog for user input. Capture user input and add the new item to the list.
Step 6: For the UI, use a ListView widget to display the list of items. Use ListTile or Card widgets to represent individual list items.
Step 7: Add a delete button for each list item to remove it from the list.
Step 8: For the app structure, create an AppBar with an action button to add new items. Render the ListView in the main application body.

How do I create a to-do list widget?

Below is a step-by-step guide on how to create a to-do list widget in Flutter:

Step 1: Ensure Flutter is installed on your system.
Step 2: Create a new Flutter project.
Step 3: Create a StatefulWidget to manage the state of the to-do list.
Step 4: Define a list variable to store the tasks (e.g., strings or custom objects).
Step 5: Create a method that shows a dialog for user input to add new tasks. Capture the input and add it to the tasks list.
Step 6: For the UI, use a Scaffold widget for the basic app structure. Implement an AppBar with an action button to trigger adding tasks.
Step 7: Utilize a ListView.builder to dynamically create list items based on the tasks list. Represent each task using ListTile or Card widgets.
Step 8: Add a delete button to each task item to allow users to remove tasks from the list.
Step 9: Use setState() to update the UI when tasks are added or removed.
Step 10: Test the To-Do list widget to ensure it functions as intended.

How do I add a todo comment in Flutter?

Below is a step-by-step guide on how to add a to-do comment in Flutter:

Step 1: Ensure Flutter is installed and configured on your machine.
Step 2: Create or open a Flutter project where you want to add the to-do comment feature.
Step 3: Create a StatefulWidget to manage the state for comments associated with to-do items.
Step 4: Create a list variable to store comments related to each to-do item.
Step 5: Create a method that displays a dialog or a new screen for user input. Capture the comment input and append it to the comments list for the respective To-Do item.
Step 6: For the UI, include a button or icon in the to-do item that opens the comment input dialog. Use a TextField in the dialog or screen to allow users to type their comments.
Step 7: Modify the UI to show the list of comments under each to-do item, possibly using a ListView or Column.
Step 8: Add a delete button for each comment to allow users to remove comments if needed.
Step 9: Employ setState() to update the UI whenever comments are added or removed.
Step 10: Run the application to ensure that the comment feature works smoothly with the to-do items.

How do you add to a list in Flutter?

Below is a step-by-step guide on how to add to a list in Flutter:

Step 1: Ensure that Flutter is installed and set up on your system.
Step 2: Create a new or open an existing Flutter project.
Step 3: Create a StatefulWidget to manage the list and its state.
Step 4: Define a list variable (e.g., List<String> _items = [];) to hold the items you want to add.
Step 5: Implement a method that adds an item to the list. You can use the add() method of the list to append new items.
Step 6: Use a TextField to allow users to enter new items they want to add. Include an ElevatedButton or another action button to trigger the addition of the item.
Step 7: Capture the text input from the TextField and store it in a variable. In the button’s onPressed callback, call the method to add the item to the list.
Step 8: Use setState() to refresh the UI and display the updated list after adding an item.
Step 9: Use a ListView or similar widget to render the items in the list. Run and test the Application:
Step 10: Run the application to ensure that items can be added to the list correctly.

How do you make a to-do list in Flutter?

Below is a step-by-step guide on how to make a to-do list in Flutter:

Step 1: Ensure Flutter is installed and configured on your system. Create a new Flutter project.
Step 2: Create a StatefulWidget to manage the state of the To-Do list.
Step 3: Define a list variable to hold the to-do items (e.g., List<String> _tasks = [];).
Step 4: Create a method that displays a dialog or a new screen for user input. Capture the input from a TextField and add it to the tasks list.
Step 5: Use a Scaffold widget for the main layout. Include an AppBar with a button to trigger the task addition.
Step 6: Utilize a ListView.builder to dynamically generate the list of tasks. Represent each task with a ListTile or Card widget.
Step 7: Add a delete button for each task to allow users to remove tasks from the list.
Step 8: Call setState() whenever tasks are added or removed to update the UI.
Step 9: Test the application to ensure that tasks can be added and removed as expected.

Free Resources

How to create a to-do list in Flutter

What is a to-do list?

Implementation

Explanation

Output