how to dynamically update ListView.builder() in Flutter?

Question

I want to render a ListView dynamically. If a value changes in the list, I have to manually hot reload the application using my IDE for the changes to apply. I have tried using StreamBuilder, but the syntax was so complex.

Here's my code:

    ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          itemCount: myMap.length,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return myMap.values.elementAt(index) == true
                ? Container(
                    padding: EdgeInsets.only(left: 20, right: 20, top: 20),
                    child: Container(child: Text(myMap.keys.elementAt(index)))
                : Container();
          }),

My stateful widget:

    import 'package:flutter/material.dart';

    class NextWidget extends StatefulWidget {
      NextWidget({Key? key}) : super(key: key);

      @override
      _NextWidgetState createState() => _NextWidgetState();
    }
    
    class _NextWidgetState extends State<NextWidget> {
      @override
      Widget build(BuildContext context) {
        return Container(
           child: MaterialButton(onPressed: () {
             setState(() {
               myMap[1] = 'Modified Value';
             }
           }, child: Text('Modify')),
        );
      }
    }

Solution 1

you have two possible approaches:

1. pass a function from parent widget to the child widget. then you can use it to change the state of parent directly:

// in parent widget define a function
void parentSetState(){
   setState((){});
   //also you can add your own code too
}

// then in child widget use this function
MaterialButton(onPressed: () {
 setState(() {
  myMap[index] = index * 2;
  widget.parentSetState();
 }
}, child: Text('Modify')),

2. use state managements like provider. Personally, I prefer to use this approach. see this link

Solution 2

Where you call the Next widget it wrap with the inkwell and write the set stae method under inkwell instead of next widget

 InkWell(
            onTap: (){
              setState(() {
                /// write your code 
              });
            },
            child: NextWidget(),
          )

Comments

[Jahidul Islam]

you can try with setState to rebuild the ui again and then you will get your update data.

[Hamza Amr]

Where should I put the setState(() {}) ?

[Jahidul Islam]

you use setstate where you could change your value? otherwise you can share code.

[Hamza Amr]

Inside another stateful widget

[Jahidul Islam]

can you share your code part?

[Hamza Amr]

I shared it in the edit

[Hamza Amr]

It isn't useful

[Jahidul Islam]

both modify button and listview.builder in same page

[Hamza Amr]

what do you mean

[Hamza Amr]

Ok I added it in the edit

[Hamza Amr]

Yes, because the setState(() {}) is in a different Stateful Widget.

[Abbasihsn]

happy to hear it. I suggest trying to work with state management as well. This concept would help you to have access to each data wherever you want. However, for a simple projects first solution works well.