Flutter Profile页面无法显示SharedPreferences与Firestore获取的用户数据

你的代码存在三个核心问题，导致用户信息无法正常显示：

• 异步操作未完成就更新状态：initState中调用getData()后立刻执行setState，但getData是异步方法，此时SharedPreferences和Firestore的请求还没结束，emailFromPrefs和nameFromDatabase仍为初始空值，最终name和email也还是空的。
• getData方法传参错误：调用UserModel().getUser(email)时，email是初始空字符串，应该用刚从SharedPreferences获取到的emailFromPrefs。
• 异步完成后未触发UI更新：getData执行完异步逻辑后，没有调用setState通知Flutter刷新界面。

修正后的代码 #

class _ProfileState extends State<Profile> {
  String name = '';
  String email = '';
  FirebaseAuth firebaseAuth = FirebaseAuth.instance;

  Future<void> getData() async {
    // 从SharedPreferences获取邮箱
    final emailFromPrefs = await sharedPreference().getCred('email');
    if (emailFromPrefs == null) {
      // 处理邮箱获取失败的情况，比如跳转回登录页
      return;
    }
    // 用获取到的邮箱从Firestore获取姓名
    final nameFromDatabase = await UserModel().getUser(emailFromPrefs);
    
    // 异步操作完成后更新状态，触发UI刷新
    setState(() {
      email = emailFromPrefs;
      name = nameFromDatabase ?? ''; // 处理姓名为空的边界情况
    });
    print('Email is $email\nName is $name');
  }

  @override
  void initState() {
    super.initState();
    // 直接调用getData，内部处理状态更新逻辑
    getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text('User Email is: $email'),
          Text('User Name is: $name'),
          MaterialButton(
            child: const Text('Logout'),
            onPressed: () {
              sharedPreference().reset();
              firebaseAuth.signOut().then((value) => Navigator.pushAndRemoveUntil(
                    context,
                    PageRouteBuilder(
                      transitionDuration: const Duration(seconds: 1),
                      transitionsBuilder:
                          (context, animation, animationTime, child) {
                        animation = CurvedAnimation(
                            parent: animation,
                            curve: Curves.fastLinearToSlowEaseIn);
                        return ScaleTransition(
                          scale: animation,
                          alignment: Alignment.center,
                          child: child,
                        );
                      },
                      pageBuilder: (context, animation, animationTime) {
                        return LoginOrSignUp();
                      },
                    ),
                    (route) => false));
            },
          )
        ],
      ),
    );
  }
}

额外优化建议 #

• 增加加载状态：在getData执行期间，显示加载指示器，提升用户体验。
• 异常捕获：对SharedPreferences和Firestore的请求添加try-catch，避免因网络问题或数据缺失导致崩溃。
• 复用实例：sharedPreference()每次调用都会创建新实例，建议在State中初始化一次或使用全局单例。

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