Flutter登出Firebase后出现Null check与RenderFlex溢出错误求解

1. 解决空值报错+路由跳转异常 #

核心原因 #

• 登出时用Navigator.push跳转到登录页，MainScreenPage仍保留在路由栈中，用户点击返回键会回到该页面，此时authUser已为null，你在代码中大量使用!强行拆包可空类型，直接触发空值报错。
• 你之前在build过程中直接执行导航跳转操作，Flutter在组件渲染阶段不允许操作路由，因此触发_debugLocked报错。

修复步骤 #

1. 修改登出逻辑，清空路由栈跳转登录页，避免用户返回能回到主页：

TextButton.icon(
  onPressed: () {
    FirebaseAuth.instance.signOut().then((value) {
      // 替换push为pushAndRemoveUntil清空所有历史路由
      Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(builder: (context) => LoginPage()),
        (route) => false,
      );
    });
  },
  icon: Icon(Icons.logout),
  label: SizedBox.shrink(),
)

2. 在build方法最开头统一判断authUser是否为空，避免后续到处做空判断，跳转逻辑放在帧渲染回调中执行：

@override
Widget build(BuildContext context) {
  CollectionReference userCollectionReference =
      FirebaseFirestore.instance.collection('users');
  CollectionReference bookCollectionReference =
      FirebaseFirestore.instance.collection('books');
  List<Book> userBooksReadList = [];

  var authUser = Provider.of<User?>(context);

  // 新增空判断逻辑
  if (authUser == null) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(builder: (context) => LoginPage()),
        (route) => false,
      );
    });
    // 跳转前返回占位加载页，避免后续代码执行
    return const Scaffold(body: Center(child: CircularProgressIndicator()));
  }

  // 后面原有代码无需改动，此时authUser已保证非空，所有authUser!都安全
  return Scaffold(
    // 原有代码
  );
}

2. 解决RenderFlex溢出报错 #

核心原因 #

• AppBar右侧溢出：actions区域的头像、用户名、登出按钮总宽度超过AppBar可用宽度，没有做自适应限制。
• 底部超大数值溢出：你在StreamBuilder中返回空状态的Text组件时没有包裹Expanded，导致Column中子组件总高度超出屏幕限制。

修复步骤 #

1. 修复AppBar右侧溢出：给actions中的StreamBuilder外层套Flexible限制宽度，同时给用户名文本增加最大行数限制：

actions: [
  // 新增Flexible包裹
  Flexible(
    child: StreamBuilder<QuerySnapshot>(
      stream: userCollectionReference.snapshots(),
      builder: (context, snapshot) {
        // 原有逻辑不变
        // 修改用户名Text组件
        return Column(
          children: [
            // 原有头像代码不变
            Text(
              curUser.displayName.toUpperCase(),
              overflow: TextOverflow.ellipsis,
              maxLines: 1, // 新增最大行数限制
              style: TextStyle(color: Colors.black),
            )
          ],
        );
      },
    ),
  ),
  // 原有登出按钮不变
]

2. 修复底部溢出：给所有StreamBuilder返回的空状态组件外层包裹Expanded，符合Column高度分配规则：

// 第一个StreamBuilder的空判断修改
if (snapshot.data!.docs.isEmpty) {
  return Expanded(
    child: Center(
      child: Text('表示する書籍データがありません',
          style: Theme.of(context).textTheme.headline4),
    ),
  );
}

// 第二个StreamBuilder的空判断同理修改
if (snapshot.data!.docs.isEmpty) {
  return Expanded(
    child: Center(
      child: Text('表示する書籍データがありません',
          style: Theme.of(context).textTheme.headline4),
    ),
  );
}

额外优化建议 #

代码中大量对book.photoUrl!、book.author!、book.rating!做强行非空拆包，建议替换为默认值写法，比如book.photoUrl ?? 'https://picsum.photos/id/1022/300'，避免后台数据为空时触发崩溃。

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