How to Make a ToDo App with Flutter with source Code StepWise in 2024

Creating a ToDo app with Flutter is a great way to get familiar with this powerful framework for building cross-platform mobile applications. Below, I’ll provide a step-by-step guide along with the source code for building a simple ToDo app in Flutter as of 2024.

Prerequisites:

Flutter SDK installed
A code editor (e.g., Visual Studio Code or Android Studio)
Basic knowledge of Dart and Flutter

Step 1: Create a New Flutter Project

Open your terminal and create a new Flutter project by running:

flutter create todo_app

Navigate into the project directory:

cd todo_app

Step 2: Set Up the Project Structure

Open the lib folder and create the following structure:

lib/
|-- main.dart
|-- models/
|   |-- todo.dart
|-- screens/
|   |-- home_screen.dart
|-- widgets/
|   |-- todo_item.dart

Step 3: Define the ToDo Model

Create a new file todo.dart under the models directory:

// lib/models/todo.dart

class ToDo {
  String title;
  bool isDone;

  ToDo({
    required this.title,
    this.isDone = false,
  });
}

Step 4: Create the ToDo Item Widget

Create a new file todo_item.dart under the widgets directory:

// lib/widgets/todo_item.dart

import 'package:flutter/material.dart';
import '../models/todo.dart';

class ToDoItem extends StatelessWidget {
  final ToDo todo;
  final Function(bool?)? onChanged;

  ToDoItem({required this.todo, required this.onChanged});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Checkbox(
        value: todo.isDone,
        onChanged: onChanged,
      ),
      title: Text(
        todo.title,
        style: TextStyle(
          decoration: todo.isDone ? TextDecoration.lineThrough : null,
        ),
      ),
    );
  }
}

Step 5: Create the Home Screen

Create a new file home_screen.dart under the screens directory:

// lib/screens/home_screen.dart

import 'package:flutter/material.dart';
import '../models/todo.dart';
import '../widgets/todo_item.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final List<ToDo> _todoList = [];
  final TextEditingController _controller = TextEditingController();

  void _addTodo() {
    setState(() {
      _todoList.add(ToDo(
        title: _controller.text,
      ));
      _controller.clear();
    });
  }

  void _toggleTodoStatus(int index, bool? value) {
    setState(() {
      _todoList[index].isDone = value!;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ToDo App'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Add a new task',
                suffixIcon: IconButton(
                  icon: Icon(Icons.add),
                  onPressed: _addTodo,
                ),
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _todoList.length,
              itemBuilder: (context, index) {
                return ToDoItem(
                  todo: _todoList[index],
                  onChanged: (value) {
                    _toggleTodoStatus(index, value);
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Step 6: Set Up the Main Entry Point

Edit the main.dart file to set up the app’s entry point:

// lib/main.dart

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

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

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

Step 7: Run the App

Ensure your emulator or physical device is running, then start the app with:

flutter run

Step 8: Additional Improvements (Optional)

Persistent Storage: You can use shared_preferences or a local database like SQLite to save tasks between app sessions.
Task Editing: Add functionality to edit existing tasks.
Categorization: Implement categories or labels for tasks.
UI Enhancements: Improve the user interface with animations, themes, etc.

Complete Code

Here’s a zip of the complete project for your reference:

todo_app.zip
|
|-- lib/
|   |-- main.dart
|   |-- models/
|   |   |-- todo.dart
|   |-- screens/
|   |   |-- home_screen.dart
|   |-- widgets/
|       |-- todo_item.dart

OUTPUT

This basic ToDo app should give you a strong foundation for building more complex apps with Flutter. Feel free to customize and expand on this code to suit your needs!

Inheritance: A class can inherit properties and methods from another class. This is useful for creating more specialized versions of a class.
Mixins: Allow you to add functionality to a class from multiple sources.
Abstract Classes: Define methods without implementations that must be overridden by subclasses.

Classes are a powerful way to structure your code in Flutter, helping you manage complex data and behaviors in a modular and reusable manner.

Post Views: 38