flutter - 通过 future 提供者值(value)查看Flutter列表

标签 flutter dart flutter-provider

我试图将类型为Future>的Future Provider的输出调用到List View构建器中。我认为我已经很接近了,因为我能够渲染最终的列表 View 本身,但是在此之前,会出现一个错误,并且在完成Future后会很快被列表 View 替换。我认为我的实现可能存在问题。

到目前为止,这是我所得到的(这些是我实际代码的派生产品,不必要的事情太多了,我试图简化一下):

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的输出将是一个小部件列表,这些小部件将填充我尝试构建的列表 View 。尽管我最终可以渲染列表 View ,但以下两者之间会出现以下错误:
The getter 'length' was called on null.
Receiver: null
Tried calling: length
The relevant error-causing widget was
FutureBuilder<List<Widget>> 

希望有人可以对此提供帮助,或者至少给出一个更好的例子。

非常感谢!

最佳答案

不能确定,但​​是这是因为您的窗口小部件可能正在构建两次,并且最初的futureProvider为null,而第二次它具有一定的值(value)。

解决方法:

替换为:

futureProvider.length

有了这个:
futureProvider?.length ?? 0

上面的代码做什么?
  • futureProvider?.length:如果futureProvider为null,请不要访问它的长度。
  • 现在返回的值将为null。
  • ?? 0:如果返回的值为null,则返回0;

  • 您需要考虑以下事项并编辑代码。
  • 首先,futureProvider不应为null。
  • 使用FutureBuilder时为什么不使用snaphot.data
  • 关于flutter - 通过 future 提供者值(value)查看Flutter列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60258410/

    相关文章:

    flutter - 如何使用 Flutter 中的 Provider 增加电子商务购物车中的商品数量

    dart - 构建函数返回 null 有问题的小部件是 : StreamBuilder<Response>

    flutter - 如何知道是什么触发了我的 Flutter 小部件重建

    flutter - 如何在 Flutter 中从 Android Manifest 获取变量?

    flutter - NoSuchMethodError : The method 'drive' was called on null

    dart - 在 Dart 中,使用 'new' 关键字和直接调用构造函数有什么区别?

    flutter - 计算 : Illegal argument in isolate message : (object is a closure - Function '<anonymous closure>' :. )

    flutter_bloc/provider RepositoryProvider 与 Provider

    dart - flutter中提取世界时/原子时

    flutter - 如何在 flutter 聊天中创建像 WhatsApp 这样的日期 header