Remove Index wise CustomWidget from List<Widget> in Flutter

Question

I have initially empty list of Widget in Column. Now on Other widget click I am adding new Custom Widget in _contactItems

   Column(
      children: _contactItems,
    )

 List<Widget> _contactItems = new List<CustomWidget>();



 _contactItems.add(newCustomWidget(value));

Now Suppose I have 6 Records (6 Custom Widgets in Column). I am trying to remove index wise records (Example. I am removing 3rd record then 1st record. Column Widgets (dynamic widgets) should be updated as _contactItems updating in setState())

Now on CustomWidget click I am removing that particular CustomWidget from Column.

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

Also tried with

_contactItems.removeWhere((item) {
            return item.key == _contactItems[index].key;
          });

Cly

What is the problem? – Kaolack

It is removing always last Widget. No problem with Index. May be problem with removeAt – Cly

give UniqueKey to each child in Column. – Butts

I tried with key: Key("index_$index"), and comparing with _contactItems.removeWhere((item) { return item.key == _contactItems[index].key; }); – Cly

Answer 1

Try this (assuming that your Column widget keys have this format):

setState(() {
  this._contactItems.removeWhere((contact) => contact.key == Key("index_$index"));
});

If this doesn't solve your issue, maybe we'll need more info.

Blare

wow :D Great! I don't know why we need to compare Key like that – Cly

I am having the same problem, how did you give you items in the column a unique key? – Topheavy

Answer 2

If you want to manipulate a ListView or GridView it is important that you assign a Key to each child Widget of the List/GridView

In short Flutter compares widgets only by Type and not state. Thus when the state is changed of the List represented in the List/GridView, Flutter doesn't know which children should be removed as their Types are still the same and checks out. The only issue Flutter picks up is the number of items, which is why it only removes the last widget in the List/GridView.

Therefore, if you want to manipulate lists in Flutter, assign a Key to the top level widget of each child. A more detailed explanation is available in this article.

This can be achieved be adding

   return GridView.count(
  shrinkWrap: true,
  crossAxisCount: 2,
  crossAxisSpacing: 5.0,
  mainAxisSpacing: 5.0,
  children: List.generate(urls.length, (index) {
    //generating tiles with from list
    return   GestureDetector(
        key: UniqueKey(), //This made all the difference for me
        onTap: () => {
          setState(() {
            currentUrls.removeAt(index); // deletes the item from the gridView
          }) 

        },
        child: FadeInImage( // A custom widget I made to display an Image from 
            image:  NetworkImage(urls[index]),
            placeholder: AssetImage('assets/error_loading.png') 
            ),

    );
  }),

);

Merrymaker