颤振轮播空安全答案

【问题标题】：Flutter Carousel null safety颤振轮播空安全
【发布时间】：2021-04-20 07:45:55
【问题描述】：

我想知道如何在从 API 接收数据的轮播滑块上执行空安全。因为无论何时我运行它，轮播都可以工作，但我首先将 getter 长度调用为空。

CarouselSlider(
                    autoPlay: true,
                    pauseAutoPlayOnTouch: Duration(seconds: 5),
                    height: 100,
                    items: <Widget>[
                      for(var i=0; i<dashDataRandomCategories.length; i++)
                        Container(
                          margin:
                          const EdgeInsets.only(top: 0.0, left: 20.0),
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: NetworkImage(
                                  dashDataRandomCategories[i]
                                  ['product_cat_image']),
                              //image: NetworkImage(image[i]),
                              fit: BoxFit.fill,
                            ),
                            // border:
                            //     Border.all(color: Theme.of(context).accentColor),
                            borderRadius: BorderRadius.circular(8.0),
                          ),
                        ),
                    ]
                  ),

【问题讨论】：

标签： flutter carousel

【解决方案1】：

不是最好的解决方案，但给你一个清晰的想法。你必须申请一个条件。当来自 API 的数据即将到来时，dashDataRandomCategories 那时为空。假设，CarouselSlider 在列中。当dashDataRandomCategories 正在加载时，您可以显示一个占位符，一个Container() 或者可能是一个微光，当数据加载时，现在您可以显示滑块！

child: Column(
  children: <Widget>[
    Container(),
    dashDataRandomCategories.length == null ? Container(child: Text("Data is Loading")) : CarouselSlider(
                autoPlay: true,
                pauseAutoPlayOnTouch: Duration(seconds: 5),
                height: 100,
                items: <Widget>[
                  for(var i=0; i<dashDataRandomCategories.length; i++)
                    Container(
                      margin:
                      const EdgeInsets.only(top: 0.0, left: 20.0),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage(
                              dashDataRandomCategories[i]
                              ['product_cat_image']),
                          //image: NetworkImage(image[i]),
                          fit: BoxFit.fill,
                        ),
                        // border:
                        //     Border.all(color: Theme.of(context).accentColor),
                        borderRadius: BorderRadius.circular(8.0),
                      ),
                    ),
                ]
              ),Container()]

【讨论】：