Flutter中如何将FirebaseAuth获取的用户信息展示到Text Widget

解决方法 #

你需要把FirebaseAuth获取到的用户信息存到组件的状态变量中，让build方法能读取这些数据更新UI，具体步骤如下：

1. 定义状态变量

在你的State类里添加变量，用来存储用户信息：

String? _userName;
String? _userEmail;
String? _userPhotoUrl;

2. 监听用户状态并更新变量

修改initState里的监听逻辑，获取到用户信息后调用setState刷新状态：

@override
void initState() {
  super.initState();
  FirebaseAuth.instance.authStateChanges().listen((User? user) {
    if (user != null) {
      setState(() {
        _userName = user.displayName;
        _userEmail = user.email;
        _userPhotoUrl = user.photoURL;
      });
      // 保留打印用于调试
      print(_userName);
      print(_userEmail);
      print(user.uid);
      print(_userPhotoUrl);
    } else {
      // 用户未登录时清空状态
      setState(() {
        _userName = null;
        _userEmail = null;
        _userPhotoUrl = null;
      });
    }
  });
}

3. 在Drawer中使用状态变量

修改UserAccountsDrawerHeader的内容，把硬编码文本替换成状态变量，同时处理空值情况：

UserAccountsDrawerHeader(
  accountName: Text(_userName ?? '未设置用户名'), // 为空时显示默认文本
  accountEmail: Text(_userEmail ?? '未绑定邮箱', style: TextStyle(color: Colors.white)),
  currentAccountPicture: CircleAvatar(
    child: ClipOval(
      child: _userPhotoUrl != null
          ? Image.network(
              _userPhotoUrl!,
              width: 90,
              height: 90,
              fit: BoxFit.cover,
            )
          : Image.network( // 头像为空时显示默认图
              'https://pbs.twimg.com/profile_images/1494938183448281089/xXIv3xmE_400x400.jpg',
              width: 90,
              height: 90,
              fit: BoxFit.cover,
            ),
    ),
  ),
  // 原有装饰代码不变
  decoration: BoxDecoration(
    color: Colors.lightGreen,
    image: DecorationImage(
      image: NetworkImage(
        'https://pbs.twimg.com/profile_banners/1394312681209749510/1634787753/1500x500',
      ),
      fit: BoxFit.cover,
    ),
  ),
),

完整修改后的代码示例

整合后的完整State类代码如下：

class YourDrawerWidget extends StatefulWidget {
  const YourDrawerWidget({super.key});

  @override
  State<YourDrawerWidget> createState() => _YourDrawerWidgetState();
}

class _YourDrawerWidgetState extends State<YourDrawerWidget> {
  String? _userName;
  String? _userEmail;
  String? _userPhotoUrl;

  @override
  void initState() {
    super.initState();
    FirebaseAuth.instance.authStateChanges().listen((User? user) {
      if (user != null) {
        setState(() {
          _userName = user.displayName;
          _userEmail = user.email;
          _userPhotoUrl = user.photoURL;
        });
        print(_userName);
        print(_userEmail);
        print(user.uid);
        print(_userPhotoUrl);
      } else {
        setState(() {
          _userName = null;
          _userEmail = null;
          _userPhotoUrl = null;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => account()),
              );
            },
            child: UserAccountsDrawerHeader(
              accountName: Text(_userName ?? '未设置用户名'),
              accountEmail: Text(_userEmail ?? '未绑定邮箱', style: TextStyle(color: Colors.white)),
              currentAccountPicture: CircleAvatar(
                child: ClipOval(
                  child: _userPhotoUrl != null
                      ? Image.network(
                          _userPhotoUrl!,
                          width: 90,
                          height: 90,
                          fit: BoxFit.cover,
                        )
                      : Image.network(
                          'https://pbs.twimg.com/profile_images/1494938183448281089/xXIv3xmE_400x400.jpg',
                          width: 90,
                          height: 90,
                          fit: BoxFit.cover,
                        ),
                ),
              ),
              decoration: BoxDecoration(
                color: Colors.lightGreen,
                image: DecorationImage(
                  image: NetworkImage(
                    'https://pbs.twimg.com/profile_banners/1394312681209749510/1634787753/1500x500',
                  ),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          // 以下ListTile代码保持不变
          ListTile(
            leading: Icon(Icons.event_available_outlined),
            title: Text('行事予定'),
            onTap: () {
              launch('https://www.ous.ac.jp/common/files//285/20220311164731084854.pdf');
            },
          ),
          ListTile(
            leading: Icon(Icons.public_outlined),
            title: Text('マイログ'),
            onTap: () {
              launchUrl(Uri.https('mylog.pub.ous.ac.jp', '/uprx/up/pk/pky501/Pky50101.xhtml'), mode: LaunchMode.externalApplication);
            },
          ),
          ListTile(
            leading: Icon(Icons.book_outlined),
            title: Text('学生便覧'),
            onTap: () {
              launch('https://edu.career-tasu.jp/p/digital_pamph/frame.aspx?id=7540000-3-30&FL=0');
            },
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.link_outlined),
            title: Text('各種リンク集'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Link()),
              );
            },
          ),
          ListTile(
            leading: Icon(Icons.call_outlined),
            title: Text('各種連絡先'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Call()),
              );
            },
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.settings_outlined),
            title: Text('設定/その他'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Setting()),
              );
            },
          ),
        ],
      ),
    );
  }
}

关键说明 #

• 调用setState是因为Flutter的StatefulWidget只有在状态变化并触发setState时，才会重新执行build方法，实现UI和数据同步。
• 使用??处理空值是为了避免用户未设置昵称、邮箱或头像时出现错误，保证UI正常显示。

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