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.

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() {
  runApp(TodoApp());
}

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

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

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

  @override
  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();
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('New Task'),
        content: TextField(controller: controller),
        actions: [
          MaterialButton(
            child: Text('Add'),
            onPressed: () {
              setState(() {
                tasks.add(controller.text);
                controller.clear();
              });
              Navigator.of(context).pop();
            },
          ),
        ],
      ),
    );
  }
}

Run Online

Explanation

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

Challenge

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