List and onTap

Add onTap to a list row and toggle task completion.

onTap on a list row

When a list row is tapped, onTap is used to change the task's completion state. In the ListTile's onTap callback, you toggle the done field of the relevant Todo and rebuild the screen with setState.

ListTile(
  title: Text(todo.title),
  onTap: () {
    setState(() {
      todo.done = !todo.done;
    });
  },
)

Toggling the done field

To complete a task, the expression todo.done = !todo.done is used. This turns true into false and false into true. For the change to appear on screen, this operation must be done inside setState; otherwise the screen is not rebuilt.

Exercise Complete a task

Write a function complete that takes List<Todo> and int index parameters, sets the done field of the relevant Todo to true, and prints 'Tamamlandi'. In main, create a list with two tasks and call complete with index 0.

Show example solution

import 'package:flutter/material.dart';

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

void tamamla(List<Todo> list, int index) {
  list[index].done = true;
  print('Tamamlandi');
}

void main() {
  final list = [Todo(title: 'A'), Todo(title: 'B')];
  tamamla(list, 0);
}

Test yourself

What does setState do?
- Opens the keyboard
- Calls the Navigator
- Rebuilds the widget
- Deletes the list
Show answer

Rebuilds the widget — setState is used to rebuild the widget after a change in State; it does not open the keyboard, call Navigator, or delete the list.

setState call

onTap: () {
  ____(() {
    todo.done = !todo.done;
  });
},

Show answer

onTap: () {
  setState(() {
    todo.done = !todo.done;
  });
},

onTap and setState parts

onTap

Row tap callback
setState

Rebuilds the screen
done

Completion field
ListTile

Row widget

Next lesson: Delete and divider

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies