How to create and update the value of Dynamic Widgets through Flutter Provider

Question

So I am implementing something like below:

class TempProvider extends ChangeNotifier(){
    List<Widget> _list = <Widget>[];
    List<Widget get list => _list;
    int _count = 0;
    int get count => _count;

    Future<List<Widget>> getList() async{
        addToList(Text('$count'));

        List _result = await db....
        _result.forEach((_item){
            addToList(Button(
                onTap: () => increment();
                child: Text('Press'),
            ));
        });
    }

    addToList(Widget widget){
        _list.add(widget);
        notifyListeners();
    }

    increment(){
        _count += 1;
        notifyListeners();
    }
}

class Parent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return FutureProvider(
        create: (context) => TempProvider().getList(),
        child: Child(),
        );
    }   
}

class Child extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
    var futureProvider = Provider.of<List<Widget>>(context);

        return Container(
        child: futureProvider == null 
            ? Text('Loading...'
            : ListView.builder(
                itemCount: futureProvider.length,
                itemBuilder: (BuildContext context, int index){
                    return futureProvider[index];
                }
            ),
        ));
    }   
}

Basically, what this does is that a List of Widgets from a Future is the content of ListView Builder that I have as its objects are generated from a database query. Those widgets are buttons that when pressed should update the "Count" value and should update the Text Widget displaying the latest "Count" value.

I was able to test the buttons and they seem to work and are incrementing the _count value via backend, however, the displayed "Count" on the Text Widget is not updating even if the Provider values are updated.

I'd like to ask for your help for what's wrong here, with my understanding, things should just update whenever the value changes, is this a Provider anti-pattern, do I have to rebuild the entire ListView, or I missed something else?

I'm still getting myself acquainted with this package and dart/flutter in general, hoping you can share me your expertise on this. Thank you very much in advance.

Answer 1

so I have been on a lot of research and a lot of trial and errors last night and this morning, and I just accidentally bumped into an idea that worked!

You just have to have put the listening value on a consumer widget making sure it listens to the nearest Provider that we have already implemented higher in the widget tree. (Considering that I have already finished drawing my ListView builder below the FutureProvider Widget)

..getList() async{
    Consumer<ChallengeViewProvider>(
        builder: (_, foo, __) => Text(
            '${foo.count}',
        ),
    );

    List _result = await db....
    _result.forEach((_item){
        addToList(Button(
            onTap: () => increment();
            child: Text('Press'),
        ));
    });
}

I have also refactored my widgets and pulled out the Button as a stateless widget for reuse. Though make sure that referenced Buttons are subscribed to the same parent provider having the Counter value and have the onTap property call out the increment() function through Provider<>.of

Hoping this will help anyone in the future!