Summary - Todo app

Combine all parts and finish a working todo app.

Combine all parts

A working todo app combines three main parts: the Todo model (task data), ListView.builder (showing tasks), and setState (rebuilding to add, complete, or delete). Navigator.push is used to add and Dismissible to delete.

ListView.builder(
  itemCount: list.length,
  itemBuilder: (context, index) {
    final todo = list[index];
    return ListTile(title: Text(todo.title));
  },
)

Exercise Show the first task

Write a function show that takes a List<Todo> parameter and prints the title of the first element. In main, create a list containing a Todo with the title 'Ilk gorev' and call show.

Show example solution

import 'package:flutter/material.dart';

class Todo {
  String title;
  bool done;
  Todo({required this.title, this.done = false});
}

void goster(List<Todo> list) {
  print(list[0].title);
}

void main() {
  final list = [Todo(title: 'Ilk gorev')];
  goster(list);
}

Test yourself

Which parts does a working todo app combine?
- Material + InkWell + ripple
- Column + Row + SizedBox
- Text + Padding + Center
- Todo + ListView + setState
Show answer

Todo + ListView + setState — A working todo app combines the Todo model, displaying with ListView, and rebuilding with setState; Text, Padding, InkWell or Column are not for this purpose.

Add the removeAt method

setState(() {
  list.____(index);
});

Show answer

setState(() {
  list.removeAt(index);
});

Todo summary

Todo

Task data
ListView.builder

Shows tasks
Dismissible

Deletes by swipe
setState

Rebuilds on change

Next lesson: AssetImage

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies