CODEWITHSUNDEEP
dartflutterflutter-sliverdart-2
Harsh Bhavsar
Harsh Bhavsar

Reputation: 1671

Remove Index wise CustomWidget from List<Widget> in Flutter

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;
          });

Upvotes: 3

Views: 7679

Answers (2)

TM00
TM00

Reputation: 1390

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') 
            ),

    );
  }),

);

Upvotes: 2

Zroq
Zroq

Reputation: 8392

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.

Upvotes: 6

Related Questions