Flutter无法将String?放入Text组件：Firebase用户邮箱获取问题

问题根源 #

1. 异步初始化时机冲突：全局loggedInUser在HomeScreen的initState中异步赋值，但ProfilePage可能在loggedInUser尚未完成赋值时就已构建，导致获取不到有效数据。
2. 空安全与无状态组件限制：loggedInUser是User?类型，直接访问.email会触发空安全错误；同时StatelessWidget无法响应状态变化，即便后续loggedInUser赋值完成，UI也不会自动更新。

解决方案 #

方案一：用FutureBuilder直接获取当前用户 #

无需依赖全局变量，直接在ProfilePage中通过Firebase Auth异步方法获取用户，用FutureBuilder处理异步结果：

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class ProfilePage extends StatelessWidget {
  final _auth = FirebaseAuth.instance;

  // 封装获取当前用户的异步方法
  Future<User?> _getCurrentUser() async {
    return _auth.currentUser;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: Stack(
          children: [
            Container(
              color: Colors.blue,
              height: double.infinity,
              width: double.infinity,
            ),
            Container(
              height: double.infinity,
              width: double.infinity,
              child: SingleChildScrollView(
                physics: const AlwaysScrollableScrollPhysics(),
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.topCenter,
                      padding: EdgeInsets.symmetric(vertical: 30),
                      width: double.infinity,
                      color: Colors.white,
                      child: Column(
                        children: [
                          // 用FutureBuilder处理异步数据渲染
                          FutureBuilder<User?>(
                            future: _getCurrentUser(),
                            builder: (context, snapshot) {
                              if (snapshot.connectionState == ConnectionState.waiting) {
                                return Text('加载中...', style: TextStyle(color: Colors.black));
                              } else if (snapshot.hasData && snapshot.data?.email != null) {
                                return Text(snapshot.data!.email!, style: TextStyle(color: Colors.black));
                              } else {
                                return Text('未登录', style: TextStyle(color: Colors.black));
                              }
                            },
                          ),
                          SizedBox(height: 5),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

方案二：转StatefulWidget+StreamBuilder监听用户状态 #

如果需要实时响应用户登录/登出状态变化，用Firebase Auth的userChanges()流配合StreamBuilder：

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class ProfilePage extends StatefulWidget {
  const ProfilePage({Key? key}) : super(key: key);

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  final _auth = FirebaseAuth.instance;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: Stack(
          children: [
            Container(
              color: Colors.blue,
              height: double.infinity,
              width: double.infinity,
            ),
            Container(
              height: double.infinity,
              width: double.infinity,
              child: SingleChildScrollView(
                physics: const AlwaysScrollableScrollPhysics(),
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.topCenter,
                      padding: EdgeInsets.symmetric(vertical: 30),
                      width: double.infinity,
                      color: Colors.white,
                      child: Column(
                        children: [
                          // 用StreamBuilder监听用户状态实时变化
                          StreamBuilder<User?>(
                            stream: _auth.userChanges(),
                            builder: (context, snapshot) {
                              if (snapshot.connectionState == ConnectionState.active) {
                                final user = snapshot.data;
                                if (user != null && user.email != null) {
                                  return Text(user.email!, style: TextStyle(color: Colors.black));
                                } else {
                                  return Text('未登录', style: TextStyle(color: Colors.black));
                                }
                              } else {
                                return Text('加载中...', style: TextStyle(color: Colors.black));
                              }
                            },
                          ),
                          SizedBox(height: 5),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

方案三：修复全局变量使用方式（兼容原有代码） #

如果坚持用全局loggedInUser，需将其改为ValueNotifier实现状态通知，再在ProfilePage中监听：

1. 修改全局变量定义：

final _auth = FirebaseAuth.instance;
final ValueNotifier<User?> loggedInUser = ValueNotifier(null);

class _HomeScreen extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    getCurrentUser();
  }

  void getCurrentUser() async {
    try {
      final user = await _auth.currentUser;
      loggedInUser.value = user;
      print(loggedInUser.value?.email);
    } catch (e) {
      print(e);
    }
  }
}

2. 在ProfilePage中使用ValueListenableBuilder：

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
// 导入定义loggedInUser的文件

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: Stack(
          children: [
            Container(
              color: Colors.blue,
              height: double.infinity,
              width: double.infinity,
            ),
            Container(
              height: double.infinity,
              width: double.infinity,
              child: SingleChildScrollView(
                physics: const AlwaysScrollableScrollPhysics(),
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.topCenter,
                      padding: EdgeInsets.symmetric(vertical: 30),
                      width: double.infinity,
                      color: Colors.white,
                      child: Column(
                        children: [
                          ValueListenableBuilder<User?>(
                            valueListenable: loggedInUser,
                            builder: (context, user, child) {
                              if (user != null && user.email != null) {
                                return Text(user.email!, style: TextStyle(color: Colors.black));
                              } else {
                                return Text('未登录', style: TextStyle(color: Colors.black));
                              }
                            },
                          ),
                          SizedBox(height: 5),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

关键注意点 #

• 空安全处理：必须对User?和String?类型做非空判断，避免运行时崩溃。
• 异步UI关联：Flutter中异步数据必须通过FutureBuilder/StreamBuilder绑定UI，确保数据就绪后再渲染。
• 实时状态监听：userChanges()流能实时响应用户登录、登出、信息修改等操作，比单次获取更可靠。

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