Refresh listview builder with deleting an element

Question

I have a simple ListView.builder which create each item in its own widget

the parent, stateful (using a futureBuilder) :

child: ListView.builder(
  itemCount: snapshot.data.length,
  itemBuilder: (context, index) {
  Conversation conversation = snapshot.data[index];
     return ConversationSingle(
         conversation: conversation,
     );
},

This part is working fine.

Now, I need to delete some of those widget by tapping another widget (classic)

the children, stateful too:

  child: GestureDetector(
    onTap: () async {
      bool deleted =
          await MyWS().delete(widget.conversation);
      print(deleted); // todo refresh parentlist
    },
    child: SvgPicture.asset(
      getAssetImage('corbeille.svg'),
    ),
  ),

Usualy, i would have pass a param inside the children to refresh the list thanks to a ValueChanged and using a simple column (i wasn't using any ListView before)

But here, data are displayed thanks the itemBuilder, and I can't really get how to refresh my list.

Jahidul Islam · Answer 1 · 2021-08-31T12:48:50.117

2

call with setState()

GestureDetector(
                onTap: () async {
                  setState(() {
                      conversations.remove(widget.conversation);
                  });
                  // todo refresh parentlist
                },
                child: SvgPicture.asset(
                  getAssetImage('corbeille.svg'),
                ),
              )

edited Aug 31 '21 at 12:48

answered Aug 31 '21 at 10:59

Jahidul Islam

11,435
3
17
38

How does this is supposed to refresh my parent ? Can you give more explaination ? – morganXap Aug 31 '21 at 12:25
The state of the widget changes you have to call setState to trigger a rebuild of the view and see immediatly the changes implied by the new state. – Jahidul Islam Aug 31 '21 at 12:43
is this answer helpful for you please mark as answer. – Jahidul Islam Aug 31 '21 at 12:49

score 0 · Answer 2 · answered Aug 31 '21 at 12:38

Ended up by passing a callback function from my parent to my children :

  child: GestureDetector(
    onTap: () async {
      bool deleted =
          await ConversationWS().deleteConversation(widget.conversation);
      if (deleted) {
        widget.onTap(widget.conversation);
      }
    },

I've saved my snapshot value in a global variable

conversations = snapshot.data;

And remove it in my parent widget

  void deleteItemConversation(Conversation conversation) {
    setState(() {
      conversations.remove(conversation);
    });
  }

It's working properly, but if you have better/cleaner solution, don't hesitate to share it

this is the way to solve this problem, otherwise go with stream or rxDart — Jahidul Islam, Aug 31 '21 at 12:44

Refresh listview builder with deleting an element

2 Answers2