deleting an element always delete the last one in flutter-CodePudding

List storedWishes = [
      {
        'title': 'Phone',
        'description': 'a phone would be nice',
        'price': 200.00,
        'icon': Icon(Icons.phone)
      },
      {
        'title': 'monitor',
        'description': 'need it for a 2 screen setup',
        'price': 350.00,
        'icon': Icon(Icons.tv)
      },
      {
        'title': 'headphones',
        'description': 'need some high quality sound',
        'price': 100.00,
        'icon': Icon(Icons.headset)
      },
    ];
    final wishes = useState(storedWishes);

    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('iWant'),
            ),
            body: Column(
              //map the wishes to a list of wish widgets
              children: wishes.value
                  .map((wish) => Wish(
                        title: wish['title'] as String,
                        description: wish['description'] as String,
                        price: wish['price'] as double,
                        icon: wish['icon'],
                        onDelete: () {
                          wishes.value.remove(wish)
                          wishes.notifyListeners();
                        },
                      ))
                  .toList(),
            )));

clicking the delete button always removes last element when i click on delete of any other element

here's a video: https://drive.google.com/file/d/1bEjHh4utynZk3QzSWw5gWv__YcpqKkb2/view?usp=sharing

CodePudding user response：

I don't know why it's not working for you, but it works fine for me. Since I don't know what your Wish class looks like I made it like this:

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
    
void main() {
  runApp(MyApp());
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {


List storedWishes = [
      {
        'title': 'Phone',
        'description': 'a phone would be nice',
        'price': 200.00,
        'icon': Icon(Icons.phone)
      },
      {
        'title': 'monitor',
        'description': 'need it for a 2 screen setup',
        'price': 350.00,
        'icon': Icon(Icons.tv)
      },
      {
        'title': 'headphones',
        'description': 'need some high quality sound',
        'price': 100.00,
        'icon': Icon(Icons.headset)
      },
    ];
    final wishes = useState(storedWishes);

    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('iWant'),
            ),
            body: Column(
              //map the wishes to a list of wish widgets
              children: wishes.value
                  .map((wish) => TextButton(
                        child: Text(wish['title'] as String),
                        onPressed: () {
                          wishes.value.remove(wish);
                          wishes.notifyListeners();
                        },
                      ))
                  .toList(),
            )));
  }
}

And it works correctly like this

CodePudding user response：

This is because it doesn't actually identify the element based on its contents. When you call the remove function on the list, it sees that the elements are a Map object and your input is also a Map object. So it simply deletes the last element.

What you would want to do is assign a unique identifier to each wish. Something like so:

      {
        'id': '0'
        'title': 'headphones',
        'description': 'need some high quality sound',
        'price': 100.00,
        'icon': Icon(Icons.headset)
      },

or if the title is going to be unique for each item then you can also reference it.

And then simply do a deep comparison by editing your delete function as such:

    onDelete: () {
      wishes.value.removeWhere((e) => e["id"] == wish["id"]);
      //OR
      //wishes.value.removeWhere((e) => e["title"] == wish["title"]);
      wishes.notifyListeners();
    },