Todo App

Create Free Backend With Appwrite

Todo App Using Flutter

This guide will walk you through the steps to create a simple Todo application using Flutter. You will learn how to create a basic UI, manage state, and implement basic functionalities. targets

1. Setup and Project Creation

First, make sure you have Flutter installed. Then, create a new Flutter project:

flutter create todo_app

2. Designing the User Interface

Now, it’s time to design the user interface. Go to the lib/main.dart file and replace the code with the following:

import 'package:flutter/material.dart';

void main() {

class TodoApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Todo App',
      home: TodoListScreen(),

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

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

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Todo List')),
      body: ListView.builder(
        itemCount: tasks.length,
        itemBuilder: (context, index) => ListTile(title: Text(tasks[index])),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _addTask(),
        child: Icon(Icons.add),

  void _addTask() {
    // Prompt user to enter a task
    TextEditingController controller = TextEditingController();
      context: context,
      builder: (context) => AlertDialog(
        title: Text('New Task'),
        content: TextField(controller: controller),
        actions: [
            child: Text('Add'),
            onPressed: () {
              setState(() {
Run Online


  • TodoApp: The root widget that sets up the MaterialApp.
  • TodoListScreen: A StatefulWidget that manages the list of tasks.
  • tasks: A list of strings to hold tasks.
  • ListView.builder: Dynamically creates a list of tasks.
  • FloatingActionButton: A button to add new tasks.
  • _addTask: Function to show a dialog for adding a new task.

Run the App

To run the app in vs code, press F5 or go to Run > Start Debugging. You can also run the app using the following command:

flutter run


Create a delete functionality for the tasks. When a user taps on a task, it should be removed from the list.