Flutter：在 null 上调用了 getter 'length'答案

【问题标题】：Flutter: The getter 'length' was called on nullFlutter：在 null 上调用了 getter 'length'
【发布时间】：2021-05-25 22:41:41
【问题描述】：

当我尝试调用 api 时，它会被调用并到达 ListView.builder 中的 itemCount，但随后会显示类似这样的错误，

在 null 上调用了 getter 'length'。

class ChopperNewsCard extends StatefulWidget {
  @override
  _ChopperNewsCardState createState() => _ChopperNewsCardState();
}

class _ChopperNewsCardState extends State<ChopperNewsCard> {
  ScrollController scrollController = ScrollController();
  ApiCall apiCall = ApiCall();
  ChopperNews res = ChopperNews();
  Future<void> getResponse() async {
    res = await apiCall.getNews(5);
  }

  @override
  void initState() {
    super.initState();

    getResponse();
  }

  @override
  void dispose() {
    super.dispose();
    scrollController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;
    return Container(
      height: height * 0.37,
      width: double.infinity,
      child: ListView.builder(
        itemCount: res.articles.length + 1, //<--------here length getting null
        controller: scrollController,
        physics: AlwaysScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          if (index == res.articles.length) {
            if (index == res.totalResults) {
              return null;
            } else {
              return Center(child: CircularProgressIndicator());
            }
          } else {
            return Container(
              width: width * 0.70,
              padding: EdgeInsets.only(right: width * 0.05),
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15),
                ),
                elevation: 3,
                child: Column(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(15),
                      child: CachedNetworkImage(
                        imageUrl: res.articles[index].urlToImage == null
                            ? Url.noImage
                            : res.articles[index].urlToImage,
                        fit: BoxFit.cover,
                        width: double.infinity,
                        height: height * 0.2,
                        placeholder: (context, url) =>
                            Center(child: CircularProgressIndicator()),
                        errorWidget: (context, url, error) =>
                            Icon(Icons.error_outline_sharp),
                      ),
                    ),
                  
                  ],
                ),
              ),
            );
          }
        },
      ),
    );
  }
}

从我尝试调用我的 api 的位置，

import 'package:chopper/chopper.dart';
import '../models/chopper_news.dart';

import 'chopper_api_service.dart';

class ApiCall {
  ChopperApiService chopperApiService;
  Future<ChopperNews> getNews(int page) async {
    chopperApiService = ChopperApiService.create();
   var apiResponse = await chopperApiService.getNews(pageSize: page);
    return apiResponse.body;
  }
}

在调试模式下，它会在长度被称为 null 后显示响应，所以我认为我的 api 调用工作正常

【问题讨论】：

标签： flutter dart

【解决方案1】：

您甚至在提供 api 响应之前进行 API 调用和呈现数据。

对于这种情况，您可能希望使用 FutureBuilder。

或者为了测试你可以添加一个条件来检查res中的articles是否为空，然后显示一个加载器。

当您收到回复时，请使用 setState(){} 更改值并显示您的 ListView.Builder

【讨论】：

我找到了解决方案并将接受作为答案

【解决方案2】：

原因是在调用 build() 时，getResponse() 没有完成。
因此，“res”为空。

你能用'FutureBuilder'包装'ListView.builder'吗？

【讨论】：

不需要使用 futurebuilder 我找到了解决方案，我会接受它作为答案

【解决方案3】：

当我得到这样的响应时，我需要使用 setState() 来更新列表，

    Future<void> getResponse(int page) async {
    var data = await apiCall.getNews(page);
    setState(() {
      res = data;
    });
  }

现在检查它是否为空然后显示加载器，

   return res?.articles?.isEmpty == null 
          ? CircularProgressIndicator()
          : ListView.builder(...)

如果任何字段为空，我需要使用 ?. 运算符

【讨论】：