Beginner’s Guide: Flutter To-Do List App Tutorial

QBlog

 

Build a Simple To-Do List App in Flutter (Step-by-Step Guide With Code)

One of the best ways to learn app development is by building something practical. And what could be more practical than a To-Do List app?

A To-Do List app helps users stay organized, manage tasks, and improve productivity. It’s simple enough for beginners to build, yet powerful enough to teach you essential Flutter concepts like widgets, state management, and user input.

In this blog, I’ll walk you through how I built a simple To-Do List app using Flutter. We’ll cover everything from setting up your environment to writing the code, testing the app, and even expanding it with new features.



Why Choose Flutter for This Project?

Before we dive into coding, let’s quickly understand why Flutter is a great choice:

  • Cross-platform development: Build apps for Android and iOS from a single codebase.

  • Fast development: Hot Reload makes it easy to see changes instantly.

  • Widget-based UI: Everything in Flutter is a widget, making customization flexible.

  • Growing ecosystem: Backed by Google and a large developer community.

With these benefits, Flutter is perfect for beginners and professionals alike.

Step 1: Setting Up Flutter

If you don’t already have Flutter installed, follow these steps:

  1. Download Flutter SDK from flutter.dev.

  2. Add it to your system PATH.

  3. Run the command:

flutter doctor

This checks your system for dependencies like Android Studio or Visual Studio Code.

  1. Install an editor (VS Code is lightweight and recommended).

  2. Add Flutter and Dart extensions for VS Code.

Now you’re ready to start building! 🚀

Step 2: Creating a New Flutter Project

Open your terminal and run:

flutter create todo_app

This generates a new Flutter project with a default counter app. Navigate into the folder:

cd todo_app

Then open it in VS Code:

code .

Step 3: Understanding the App Structure

Our To-Do List app will have three main parts:

  1. Input field – to add new tasks.

  2. Task list – to display added tasks.

  3. Checkbox – to mark tasks as completed.

This structure will help us practice state management in Flutter.

Step 4: Writing the Code

Let’s replace the default main.dart file with our To-Do List code.

main.dart

import 'package:flutter/material.dart';

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

class ToDoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter To-Do List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ToDoHomePage(),
    );
  }
}

class ToDoHomePage extends StatefulWidget {
  @override
  _ToDoHomePageState createState() => _ToDoHomePageState();
}

class _ToDoHomePageState extends State<ToDoHomePage> {
  final List<String> _tasks = [];
  final TextEditingController _controller = TextEditingController();

  void _addTask() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _tasks.add(_controller.text);
        _controller.clear();
      });
    }
  }

  void _removeTask(int index) {
    setState(() {
      _tasks.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My To-Do List'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(
                      hintText: 'Enter a task',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: _addTask,
                  child: Text('Add'),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_tasks[index]),
                  trailing: IconButton(
                    icon: Icon(Icons.delete, color: Colors.red),
                    onPressed: () => _removeTask(index),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Step 5: Running the App

Run the app using:

flutter run

You should see:

  • A text field to enter tasks.

  • An Add button to save tasks.

  • A list of tasks below.

  • A delete button to remove tasks.

🎉 Congratulations! You just built a working To-Do List app.

Step 6: Improving the App

Now that we have a basic version, let’s add some improvements.

1. Mark Tasks as Completed

We’ll modify the task list to include checkboxes.

class Task {
  String name;
  bool isDone;

  Task({required this.name, this.isDone = false});
}

Then update the list to use Task objects instead of just strings. This lets us track whether a task is complete.

2. Save Tasks Locally

To keep tasks even after closing the app, use the shared_preferences package:

dependencies:
  shared_preferences: ^2.0.15

This allows you to save tasks in local storage.

3. Add a Dark Mode

Flutter makes this easy by modifying the theme:

themeMode: ThemeMode.system,
darkTheme: ThemeData.dark(),

Step 7: Testing the App

Always test your app on both Android and iOS simulators. Try adding, deleting, and completing tasks.

Step 8: Publishing the App

Once your app works smoothly, you can publish it:

  1. Generate an APK:

flutter build apk --release

  1. Upload to Google Play or TestFlight (for iOS).

  2. Add an app icon, screenshots, and descriptions.

Lessons Learned

While building this app, I learned:

  • How to use Stateful widgets in Flutter.

  • How to handle user input with controllers.

  • How to use ListView.builder for dynamic lists.

  • The importance of breaking code into models (like our Task class).

Possible Future Features

If you want to expand your To-Do List app, here are some ideas:

  • Categories or tags for tasks.

  • Notifications/reminders.

  • Sync with Google Calendar.

  • Cloud storage with Firebase.

  • User authentication (sign-in/sign-up).

Conclusion

Building a To-Do List app in Flutter is the perfect beginner project. It’s simple, yet powerful enough to teach you real-world development concepts.

We covered:

  • Setting up Flutter.

  • Creating a new project.

  • Writing a functional To-Do List app.

  • Adding improvements like checkboxes and dark mode.

  • Next steps for publishing and upgrading.

By the end of this guide, you should not only have a working app but also the confidence to start exploring bigger Flutter projects.

So open up your code editor and start building your first Flutter app today—your productivity (and your future apps) will thank you!

QBlog

Posted by QBlog

Post a Comment

0 Comments