Delete and divider

Add swipe to delete and row dividers.

Deleting with Dismissible

To delete by swiping, the Dismissible widget is used. Dismissible wraps its child and calls the onDismissed callback when the user swipes it left or right. Each Dismissible must be given a unique key.

Dismissible(
  key: ValueKey(todo.title),
  onDismissed: (direction) {
    setState(() {
      list.removeAt(index);
    });
  },
  child: ListTile(...),
)

Separator with Divider

To put a separator between list rows, ListView.separated and Divider are used. The separatorBuilder draws a widget between each row; usually a Divider is given. This visually separates the rows.

Exercise Delete by swipe

Write a function delete that takes List<Todo> and int index parameters, removes the element at that index, and prints 'Silindi'. In main, create a list with two tasks and call delete 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 sil(List<Todo> list, int index) {
  list.removeAt(index);
  print('Silindi');
}

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

Test yourself

Which parameter of Dismissible must be given a unique value?
- shape
- key
- padding
- color
Show answer

key — Dismissible must be given a unique key; color, shape and padding do not need to be unique.

Add onDismissed to Dismissible

Dismissible(
  key: ValueKey(todo.title),
  ____: (direction) {
    list.removeAt(index);
  },
  child: ListTile(...),
)

Show answer

Dismissible(
  key: ValueKey(todo.title),
  onDismissed: (direction) {
    list.removeAt(index);
  },
  child: ListTile(...),
)

Delete and separator parts

Dismissible

Provides swipe to delete
key

Dismissible's unique id
Divider

Row separator line
ListView.separated

List with separator

Next lesson: Summary - Todo app

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies