You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter报错:The method '[]' was called on null,求解决方法

问题

运行Flutter应用时抛出NoSuchMethodError,错误信息如下:

构建Widget时抛出如下NoSuchMethodError错误:
The method '[]' was called on null.
Receiver: null
Tried calling: []

调试器中无异常,但运行时出现该错误,请问该如何解决?

问题代码

业务逻辑代码

late String urlImage;
late String urlImageSource;
var _post;

final List<Article> _posts = [
  Article(
    urlImage: 'urlImage',
    urlImageSource: 'urlImageSource',
    title: 'title',
    description: 'description',
  ),
];

String checkIfUrlContainPrefixHttps(String urlImageSource) {
  if (!urlImageSource.startsWith("//") || !urlImageSource.startsWith("http")) {
    return  urlImageSource;
  } else {
    return 'https://' + urlImageSource;
  }
}

Widget代码

SizedBox(
  height: 190,
  width: double.infinity,
  child: CachedNetworkImage(
    imageUrl: checkIfUrlContainPrefixHttps(_post[0].urlImageSource),
    fit: BoxFit.cover,
    placeholder: (context, url) => Image.asset("assets/gif/shimmer.gif",
      width: double.infinity,
      height: 190,
      fit: BoxFit.cover,
    ),
    errorWidget: (context, url, error) => 
        Image.asset("assets/images/unloadedImage.png", 
         width: 250, 
         height: 250,
    ),
  ),
)
解决方案

1. 修复变量名错误(核心问题)

你在Widget中调用的_post[0]是未初始化的变量,它的值为null,所以调用[]方法时触发错误。而你实际已经定义并初始化了一个列表_posts(注意末尾带s),只需把_post[0]替换为_posts[0]即可。

修改后的Widget代码片段:

imageUrl: checkIfUrlContainPrefixHttps(_posts[0].urlImageSource),

2. 修复URL处理方法的逻辑错误

原checkIfUrlContainPrefixHttps方法的条件判断逻辑错误,使用||(逻辑或)会导致大部分情况直接返回原URL,无法正确补全https前缀。正确逻辑应该分情况处理:

  • 如果URL以//开头,添加https:前缀
  • 如果URL不以http开头,添加https://前缀
  • 其他情况直接返回原URL

修正后的方法代码:

String checkIfUrlContainPrefixHttps(String urlImageSource) {
  if (urlImageSource.startsWith("//")) {
    return 'https:' + urlImageSource;
  } else if (!urlImageSource.startsWith("http")) {
    return 'https://' + urlImageSource;
  }
  return urlImageSource;
}

3. 额外优化:避免索引越界

如果_posts列表可能为空,直接访问_posts[0]会触发索引越界错误,建议添加空判断:

imageUrl: checkIfUrlContainPrefixHttps(
  _posts.isNotEmpty ? _posts[0].urlImageSource : ""
),

内容的提问来源于stack exchange,提问作者Pimpi Rimpà

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.16 00:15:42