Flutter 'map' 动态调用 null。接收方：'_Future<dynamic>' 的实例 参数：['(dynamic) => Builder' 的实例]

Question

我正在尝试使用此列表制作横幅，该列表可通过函数“getBannerList”访问，而不必在此轮播中手动编写列表

如果我通过在 items: ['base64string','base64string','base64string'].map 手动放置列表来设置项目，它会正常工作，但是当我用函数替换它时会导致此错误

错误

The following NoSuchMethodError was thrown building MyApp(dirty, dependencies: [MediaQuery], state: _MyAppState#5a46f):
'map'
Dynamic call of null.
Receiver: Instance of '_Future<dynamic>'
Arguments: [Instance of '(dynamic) => Builder']

轮播代码

Dependencies: carousel_slider: ^4.0.0

 CarouselSlider(
          options: CarouselOptions(
            height: MediaQuery.of(context).size.height * 0.15,
            autoPlay: true,
            autoPlayInterval: Duration(seconds: 5),
            initialPage: 0,
          ),
          items: getBannerList().map((e) {   // <---- if i replaced this with ['asdf','asdf,'asdf].map((e) it works fine
            return Builder(
              builder: (BuildContext context) {
                return Container(
                  width: MediaQuery.of(context).size.width,
                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                  decoration: BoxDecoration(
                    image: DecorationImage(image: MemoryImage(base64Decode(e.toString()))),
                    color: Colors.white,
                  ),
                );
              },
            );
          }).toList(),
        ),

获取列表函数

 getBannerList() async{
    dynamic data = await getDashBoardBannerData();
    print(data);
    return data;
  }

returns（返回原因base64字符串太长的例子）：

['base64imgstring','base64imgstring','base64imgstring']

Answer 1

getBannerList 方法返回 Future<dynamic> 而不是 List :
1-将方法签名更改为Future<List<String>> getBannerList() async{}
2- 在您的StatefullWidget 中定义一个变量，称为

late final Future<List> bannerList;

3- 在初始化状态下初始化变量

@override
void initState(){
 bannerList = getBannerList();
}

4- 现在我们应该使用FutureBuilder 和我们的basserList

FutureBuilder<List<String>>(
        future: bannerList, // your future data
        builder: (BuildContext context, AsyncSnapshot<List<String>> snapshot) {
          if (snapshot.hasData) {
            return CarouselSlider(
          options: CarouselOptions(
            height: MediaQuery.of(context).size.height * 0.15,
            autoPlay: true,
            autoPlayInterval: Duration(seconds: 5),
            initialPage: 0,
          ),
          items: snapshot.data.map((e) {
            return Builder(
              builder: (BuildContext context) {
                return Container(
                  width: MediaQuery.of(context).size.width,
                  margin: EdgeInsets.symmetric(horizontal: 5.0),
                  decoration: BoxDecoration(
                    image: DecorationImage(image: MemoryImage(base64Decode(e.toString()))),
                    color: Colors.white,
                  ),
                );
              },
            );
          }).toList(),
        );
          } else if (snapshot.hasError) {
            return Text('Loading Error'); // error state
          } else {

          return CircularProgressIndicator(); // loading state
        },
      

您应该使用显式类型来减少错误。