Flutter项目中如何获取用户显示名并避免空检查错误？

我正在开发一个Android三轮车预约系统的Flutter项目，应用中使用了Drawer组件。希望用户登录后，其姓名能显示在Drawer中，但按照教程操作后，屏幕总是变红并显示错误：

"Null check operator used on a null value."

我认为这是由于尝试显示用户名导致的，已经卡了好几天了，求帮助！

另外发现的现象：登录后会显示空错误，切换到其他页面再返回报错页面时，错误突然消失了。

获取用户名的代码片段： #

UserAccountsDrawerHeader(
                decoration: BoxDecoration(
                  color: Color(0xFFFED90F),
                ),
                accountName: new Text(userModelCurrentInfo!.first_name! + " " + userModelCurrentInfo!.last_name!, // 报错的行
                style: TextStyle( color: Colors.white,
                  fontSize: 15,
                  fontFamily: "Montserrat",
                  fontWeight: FontWeight.w600,),
                ),
                accountEmail: new Text(user.email!,
                style: TextStyle( color: Colors.white,
                  fontSize: 15,
                  fontFamily: "Montserrat",
                  fontWeight: FontWeight.w600,),
                    ),
                currentAccountPicture: new CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage("assets/images/machu.jpg"),
                ),
              ),

读取当前用户信息的代码： #

static void readCurrentOnlineUserInfo() async
  {

    final FirebaseAuth fAuth = FirebaseAuth.instance;
    User? currentFirebaseUser;

    currentFirebaseUser = fAuth.currentUser;

    DatabaseReference userRef = FirebaseDatabase.instance
        .ref()
        .child("passengers")
        .child(currentFirebaseUser!.uid);

    userRef.once().then((snap)
    {
      if(snap.snapshot.value != null)
      {
        userModelCurrentInfo = UserModel.fromSnapshot(snap.snapshot);
        print("name" + userModelCurrentInfo!.first_name.toString());
        print("id" + userModelCurrentInfo!.id.toString());
      }
    });
  }

1. 问题根源 #

错误核心原因：

• readCurrentOnlineUserInfo是异步方法，从Firebase读取用户数据需要时间，但UI会先渲染，此时userModelCurrentInfo还是null，你用!强制解包触发了空指针错误。
• 切换页面再返回时，数据已经读取完成，userModelCurrentInfo有值，所以错误消失。

2. 具体修复方法 #

方法一：用FutureBuilder处理异步数据

把读取用户信息的逻辑改成返回Future，用FutureBuilder包裹Drawer头部，确保数据加载完成后再渲染：

首先修改读取方法：

static Future<UserModel?> readCurrentOnlineUserInfo() async {
  final FirebaseAuth fAuth = FirebaseAuth.instance;
  User? currentFirebaseUser = fAuth.currentUser;
  
  if (currentFirebaseUser == null) return null;

  DatabaseReference userRef = FirebaseDatabase.instance
      .ref()
      .child("passengers")
      .child(currentFirebaseUser.uid);

  DataSnapshot snap = await userRef.get();
  if(snap.value != null) {
    return UserModel.fromSnapshot(snap);
  }
  return null;
}

然后在Drawer中使用FutureBuilder：

Drawer(
  child: ListView(
    children: [
      FutureBuilder<UserModel?>(
        future: YourClass.readCurrentOnlineUserInfo(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 加载中显示占位符
            return UserAccountsDrawerHeader(
              decoration: BoxDecoration(color: Color(0xFFFED90F)),
              accountName: Text("加载中...", style: TextStyle(color: Colors.white)),
              accountEmail: Text("", style: TextStyle(color: Colors.white)),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage("assets/images/machu.jpg"),
              ),
            );
          }
          
          UserModel? userModel = snapshot.data;
          if (userModel == null) {
            // 数据加载失败或无数据时的占位
            return UserAccountsDrawerHeader(
              decoration: BoxDecoration(color: Color(0xFFFED90F)),
              accountName: Text("未知用户", style: TextStyle(color: Colors.white)),
              accountEmail: Text("", style: TextStyle(color: Colors.white)),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage("assets/images/machu.jpg"),
              ),
            );
          }
          
          // 数据加载完成，正常显示
          return UserAccountsDrawerHeader(
            decoration: BoxDecoration(color: Color(0xFFFED90F)),
            accountName: Text(
              "${userModel.first_name ?? ""} ${userModel.last_name ?? ""}",
              style: TextStyle(
                color: Colors.white,
                fontSize: 15,
                fontFamily: "Montserrat",
                fontWeight: FontWeight.w600,
              ),
            ),
            accountEmail: Text(
              fAuth.currentUser?.email ?? "",
              style: TextStyle(
                color: Colors.white,
                fontSize: 15,
                fontFamily: "Montserrat",
                fontWeight: FontWeight.w600,
              ),
            ),
            currentAccountPicture: CircleAvatar(
              radius: 50.0,
              backgroundImage: AssetImage("assets/images/machu.jpg"),
            ),
          );
        },
      ),
      // 其他Drawer列表项...
    ],
  ),
);

方法二：添加空值判断（临时解决）

不推荐但能快速规避错误：在使用userModelCurrentInfo前判断是否为null，同时对first_name和last_name做空值处理：

accountName: Text(
  "${userModelCurrentInfo?.first_name ?? ""} ${userModelCurrentInfo?.last_name ?? ""}",
  style: TextStyle(
    color: Colors.white,
    fontSize: 15,
    fontFamily: "Montserrat",
    fontWeight: FontWeight.w600,
  ),
),
accountEmail: Text(
  user.email ?? "",
  style: TextStyle(
    color: Colors.white,
    fontSize: 15,
    fontFamily: "Montserrat",
    fontWeight: FontWeight.w600,
  ),
),

这种方式会在数据加载完成前显示空白或默认文本，用户体验不如FutureBuilder。

方法三：用状态管理工具（如Provider/Riverpod）

如果项目已用状态管理，可把用户信息存入状态，UI监听状态变化：

1. 定义包含UserModel? userInfo的状态类
2. 登录成功后调用读取方法更新状态
3. Drawer中监听状态，根据状态显示加载中、空数据或正常内容

3. 额外注意事项 #

• 确保UserModel的fromSnapshot方法正确解析Firebase数据，避免first_name或last_name为null
• 可在登录流程完成后再跳转到主页面，确保用户信息已加载完成，避免UI提前渲染
• 处理currentFirebaseUser为null的情况（比如用户未登录时，不要调用读取用户信息的方法）

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