Flutter Remove selected element from list

Question

I try to remove the element from list I am clicking on. I think I have to specify the parameters in the Todos class, but dont know what I have to add, maybe with Id's and increment the Id but how would i catch the current ID. Here is a Snipped from the debugger and a the Todo class code

Here is TODO class:

class Todo {
  Todo({required this.name, required this.checked});

  final String name;
  bool checked;

  static Todo fromJson(Map json) {
    return Todo(name: json['name'], checked: json['checked']);
  }

  Map toJson() {
    return {
      'name': name,
      'checked': checked,
    };
  }
}

class TodoItem extends StatelessWidget {
  TodoItem({
    required this.todo,
    required this.onTap,
    required this.onDelete,
  }) : super(key: ObjectKey(todo));

  final Todo todo;
  final Function onTap;
  final Function onDelete;

  TextStyle? _getTextStyle(bool checked) {
    if (!checked) return null;

    return const TextStyle(
      color: Colors.black54,
      decoration: TextDecoration.lineThrough,
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {
        onTap(todo);
      },
      leading: CircleAvatar(
        child: Text(todo.name[0]),
      ),
      title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(todo.name, style: _getTextStyle(todo.checked)),
          IconButton(
              onPressed: () {
                print(todo.name);
                onDelete();
              },
              icon: Icon(Icons.delete))
        ],
      ),
    );
  }
}

Tirth Patel · Answer

You could set the onDelete parameter to call _deleteTodoItem using Contructor like this:

ListView(
  // other params ...
  children: _todos
      .map(
        (todo) => TodoItem(
          onDelete: () async {
            await _deleteTodoItem(todo.name);
          },
          // other params
          onTap: () {}, // set it to whatever,
          todo: todo,
        ),
      )
      .toList(),
  // other params ...
);

Sergio Clemente · Answer

If you now the index of you list, you can do:

_todos.removeAt(index);

So... you can modify your code to find the index using a listviewbuilder:

@override
  Widget build(BuildContext context) {
    return ListView.builder(
      physics: ScrollPhysics(),
      scrollDirection: Axis.vertical,
      itemCount: _todos.length,
      itemBuilder: (BuildContext ctx, index) {
      return ListTile(
      onTap: () {
        onTap(todo);
      },
      leading: CircleAvatar(
        child: Text(todo.name[0]),
      ),
      title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(todo.name, style: _getTextStyle(todo.checked)),
          IconButton(
              onPressed: () {
                print('${todo.name} index: $index');
                onDelete(index);
              },
              icon: Icon(Icons.delete))
        ],
      ),
     ),
    );
  }

Flutter Remove selected element from list

2 Answers