通过 Future Provider Value 的 Flutter 列表视图

Question

I am trying to call the output of a Future Provider of type Future> into a List View builder. I think I am very near as I am able to render the final List View itself, however, prior that, an error appears and is quickly replaced by the List View after completing the Future. I believe there may be something wrong with my implementation there.

Here's what I've got so far (these are derivatives of my actual code, there's too many going on there that aren't necessary, I tried to simplify it):

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

    Future<List<Widget>> getList() async{
        List _result = await db....
        _result.forEach((_item){
            addToList(_item);
        });
    }

    addToList(Widget widget){
        _list.add(widget);
        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 FutureBuilder(
            initialData: <Widget>[],
            future: TempProvider().getList(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.connectionState == ConnectionState.none &&
                    snapshot.hasData == true) {
                    return ListView.builder(
                        itemCount: futureProvider.length,
                        itemBuilder: (BuildContext context, int index) {
                            return futureProvider[index];
                        },
                    );
                } else {
                    return Text('ALAWS');
                }
          },
        );
    }   
}

So basically, the output of my Future will be a list of widgets that will populate a List View that I am trying to build. Though I am able to render the list view in the end, the error below appears in between:

The getter 'length' was called on null.
Receiver: null
Tried calling: length
The relevant error-causing widget was
FutureBuilder<List<Widget>> 

Hoping someone can help with this one or at least give a better example.

Thank you so much!

Answer 1

Not sure but, this is happening because your widget might be building twice and at first futureProvider is null and in second time it has some value.

Workaround:

Replace this:

futureProvider.length

With this:

futureProvider?.length ?? 0

What the above code does?

1. futureProvider?.length : if futureProvider is null don't access it's length.
2. Now the value returned will be null.
3. ?? 0 ?? 0 : if the value returned is null then return 0 ;

You need to think over following things and edit your code.

1. At first place futureProvider should not be null.
2. Why are you not using snaphot.data when you are using FutureBuilder.

Answer 2

So I have been doing my research and found the article below which shows a definite implementation based on what I need:

Flutter Provider Examples - Codetober Credits to Douglas Tober for the article. Thanks again to Kalpesh for the quick help!