Flutter使用UserModel给Avatar传值时空类型不匹配错误如何解决？

问题根本原因 #

这是Dart空安全机制触发的类型不匹配错误，两个核心问题：

1. 你定义的Avatar组件要求avatarUrl参数为非空String类型，但你传递的currentUser?.avatarUrl因currentUser本身是可空类型，最终得到的是可空的String?类型，两者类型不匹配。
2. 你在Avatar内部写的avatarUrl == null判断完全无效：非空类型的变量不可能为null，所以IDE会抛出异常提示。

修复步骤 #

第一步：修改Avatar组件的属性定义 #

既然你已经做了avatarUrl为空时展示默认头像的逻辑，直接把avatarUrl定义为可空类型即可，修改后的Avatar代码如下：

import 'package:flutter/material.dart';

class Avatar extends StatelessWidget{
// 改成可空类型String?
final String? avatarUrl;
final VoidCallback onTap;

const Avatar({required this.avatarUrl, required this.onTap});

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: onTap,
        // 现在这个判断是合法的，avatarUrl可以为null
        child: avatarUrl == null
        ? CircleAvatar(
          backgroundImage: NetworkImage ("https://www.villascitemirabel.com/wp-content/uploads/2016/07/default-profile.png"),
          radius: 90.0,
          child: Icon(Icons.photo_camera, size: 45),
        )
            :CircleAvatar(
          radius: 50.0,
          // 这里因为前面已经判断了不为null，Dart会自动类型提升为非空String，加!断言即可
          backgroundImage: NetworkImage(avatarUrl!)
        ),
    );
 }
}

第二步：验证调用处的报错是否消失 #

修改完Avatar组件后，你在ProfileEditScreen里的avatarUrl: currentUser?.avatarUrl,传参就会自动匹配String?类型，原来的报错直接消除。

可选方案：不想修改Avatar组件的处理方式 #

如果你不想调整Avatar的属性定义，也可以在传参时给可空值设置默认 fallback，代码如下：

Avatar(
  // 当currentUser?.avatarUrl为null时，传入空字符串
  avatarUrl: currentUser?.avatarUrl ?? '',
  onTap: () {},
),

同时修改Avatar内部的判断逻辑，把判断null改成判断空字符串即可：

child: avatarUrl.isEmpty
    ? // 展示默认头像逻辑
    : // 展示用户头像逻辑

内容的提问来源于stack exchange，提问作者kernelrpc_mach_vm_protect