Flutter Development-3: Implementing a Simple To-Do List App UI

In our previous post, we created a Flutter project and explored its basic structure. This time, we’ll implement a simple UI for a To-Do list app. Through this process, you’ll learn about Flutter’s basic widgets and how to compose layouts.

Table of Contents

1. Project Setup

First, let’s create a new Flutter project:

flutter create todo_app
cd todo_app

2. Implementing the Main Screen

Open the lib/main.dart file and modify it as follows:

import 'package:flutter/material.dart';

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

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

class TodoListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My To-Do List'),
      ),
      body: TodoList(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // TODO: Implement add new todo functionality
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class TodoList extends StatelessWidget {
  final List<String> todos = ['Buy groceries', 'Clean the house', 'Walk the dog'];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(todos[index]),
          trailing: Checkbox(
            value: false,
            onChanged: (bool? value) {
              // TODO: Implement checkbox state change functionality
            },
          ),
        );
      },
    );
  }
}

3. Code Explanation

MyApp class: Sets the overall theme and home screen of the app.
TodoListScreen class: Composes the main screen of the app. It includes an AppBar, TodoList, and FloatingActionButton.
TodoList class: Implements a ListView to display the list of todos.

4. Key Widgets Explained

Scaffold: Provides the basic app screen structure.
AppBar: The title bar at the top of the app.
ListView.builder: Dynamically generates the list.
ListTile: Displays each item in the list.
Checkbox: Used to check off completed todos.
FloatingActionButton: A button for adding new todos.

5. Running the App

In your terminal, run the following command to start the app:

flutter run

Wrap-up

In this post, we implemented a simple UI for a To-Do list app. In our next post, we’ll add state management to implement functionality for adding new todos and changing their completion status.

If you have any questions about Flutter development, feel free to leave a comment below!

Related Resources

Flutter Official Documentation: https://flutter.dev/docs
Flutter Widget Catalog: https://flutter.dev/docs/development/ui/widgets