如何解决Flutter中出现'type Null is not a subtype of type int'的报错问题

问题原因 #

你在_CallListState中定义了get index => null;，之后在CircleAvatar的backgroundImage属性里用了这个为null的index去访问recentCalls列表，Dart要求列表下标必须是int类型，null不符合要求，就抛出了这个错误。

解决方案 #

1. 首先删掉_CallListState里没用的get index => null;这行代码
2. 你已经在构造CallList的时候把对应条目的imageURL作为参数传入了，不需要再在组件内部访问全局的recentCalls列表，直接用widget.imageURL取值即可
3. 补充空URL的兼容逻辑：你部分数据的imageURL是空字符串，直接传给NetworkImage会触发加载错误，需要加判断，空的话用默认占位资源

修改后的CircleAvatar代码参考：

CircleAvatar(
  // 直接用组件参数传入的imageURL，不需要读取全局recentCalls
  backgroundImage: widget.imageURL?.isNotEmpty == true 
      ? NetworkImage(widget.imageURL!) 
      : null,
  // 空URL时显示默认头像图标
  child: widget.imageURL?.isNotEmpty != true 
      ? const Icon(Icons.person, size: 30) 
      : null,
  maxRadius: 30,
),

修改完成后即可正常渲染列表，同时也避免了组件和全局数据耦合的问题，后续更换数据源也不需要修改CallList的内部逻辑。

内容的提问来源于stack exchange，提问作者George Jonathan Osafo-Osei