Flutter List View 通过 Future Provider Value

Question

我正在尝试将 Future> 类型的 Future Provider 的输出调用到列表视图构建器中。我认为我已经非常接近了，因为我能够自己呈现最终的列表视图，但是，在此之前，会出现一个错误，并在完成 Future 后很快被列表视图替换。我相信我的实施可能有问题。

这是我目前得到的（这些是我的实际代码的衍生，有太多不必要的东西，我试图简化它）：

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

所以基本上，我的 Future 的输出将是一个小部件列表，这些小部件将填充我正在尝试构建的列表视图。虽然我最终能够呈现列表视图，但下面的错误出现在两者之间：

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

希望有人可以帮助解决这个问题，或者至少给出一个更好的例子。

非常感谢！

Answer 1

不确定，但是，发生这种情况是因为您的小部件可能构建了两次，第一次 futureProvider 为空，第二次它有一些价值。

解决方法：

替换为：

futureProvider.length

有了这个：

futureProvider?.length ?? 0

上面的代码是做什么的？

futureProvider?.length：如果 futureProvider 为 null，则不要访问它的长度。
现在值 returned 将为空。
?? 0：如果值 returned 为空，则 return 0；

您需要考虑以下事项并编辑您的代码。

第一位futureProvider不应该为空。
为什么在使用 FutureBuilder 时不使用 snaphot.data。

Answer 2

所以我一直在做我的研究并找到了下面的文章，它根据我的需要显示了一个明确的实现：

Flutter Provider Examples - Codetober 感谢 Douglas Tober 的这篇文章。再次感谢 Kalpesh 的快速帮助！

Flutter List View 通过 Future Provider Value

Flutter List View through Future Provider Value

flutter

dart

flutter-provider

解决方法：

替换为：

有了这个：

上面的代码是做什么的？

您需要考虑以下事项并编辑您的代码。