Flutter build方法空安全报错：Icon?无法赋值给Widget列表元素类型

你实现了一个继承自StatelessWidget的组件MyPageListTile，组件接收两个参数：

• title：必填非空Text类型
• leading：可选可空Icon类型

你尝试通过if分支判断leading是否为空，分别返回不同布局的Row组件，但VS Code持续抛出如下编译错误：

元素类型 'Icon?' 无法赋值给列表类型 'Widget'。(dartlist_element_type_not_assignable)

对应实现代码如下：

class MyPageListTile extends StatelessWidget {
  final Text title;
  final Icon? leading;

  MyPageListTile({this.leading, required this.title});

  @override
  Widget build(BuildContext context) {
    if (leading is Icon) {
      return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [leading, SizedBox(width: 10), title]);
    } else {
      return Row(
          crossAxisAlignment: CrossAxisAlignment.start, children: [title]);
    }
  }
}

这个报错是Dart空安全的流分析规则限制导致的：
Dart的类型自动提升能力仅对局部变量生效，类的可空成员属性不支持类型自动提升。由于类成员的getter可能被子类覆写，即使你在if条件中判断了leading is Icon或者leading != null，编译器也无法保证后续读取leading时它的值不会发生变化，因此依然会将分支内的leading识别为可空的Icon?类型，直接放入要求元素为非空Widget的children列表中，就会触发类型不匹配的编译错误。

以下三种方案都可以解决该问题，按需选择即可：

• 方案1：将类成员赋值给局部变量后再做判断，局部变量支持流分析的类型自动提升

@override
Widget build(BuildContext context) {
  // 先把可空成员属性赋值给局部变量
  final localLeading = leading;
  if (localLeading != null) {
    return Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [localLeading, SizedBox(width: 10), title]);
  }
  return Row(
      crossAxisAlignment: CrossAxisAlignment.start, children: [title]);
}

• 方案2：在确认非空的分支中对leading添加空断言!，显式告知编译器该位置值非空。注意该方式需要你自己保证判断逻辑的严谨性，避免运行时空指针错误

@override
Widget build(BuildContext context) {
  if (leading != null) {
    return Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        // 加!显式断言非空
        children: [leading!, SizedBox(width: 10), title]);
  } else {
    return Row(
        crossAxisAlignment: CrossAxisAlignment.start, children: [title]);
  }
}

• 方案3：使用Dart集合内的if语法直接构建children列表，代码更简洁，是Flutter开发中的常用写法

@override
Widget build(BuildContext context) {
  return Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      if (leading != null) ...[
        leading!,
        SizedBox(width: 10),
      ],
      title
    ],
  );
}

内容的提问来源于stack exchange，提问作者i.meant.to.be