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

Question

当我尝试调用 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 调用我认为工作正常

Answer 1

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

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

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

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

Answer 2

原因是调用 build() 时，getResponse() 没有完全完成。
由于这个原因，“res”是 null。

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

Answer 3

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

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

现在检查它是否是 null 然后显示加载程序，

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

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