Flutter开发中如何在Widget内调用SharedPreferences提取的extractedUserData

你的核心问题是 extractedUserData 是 sf_extractedUserData 方法内部的局部变量，作用域仅局限在该方法内，build 方法无法跨作用域访问，需要将它提升为 State 类的成员变量即可调用，修改步骤如下：

修改点说明 #

• 在 _HomeScreenState 类中新增成员变量，用来存储解析后的用户数据
• 调整异步方法逻辑，将 json.decode 返回的结果赋值给这个成员变量
• 在 build 方法中增加加载状态判断，避免异步请求未完成时出现空值异常

完整修改后代码 #

class _HomeScreenState extends State<HomeScreen> {
  // 新增成员变量存储用户数据
  Map<String, dynamic>? _userData;
  // 加载状态标记
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    sf_extractedUserData();
  }

  Future<void> sf_extractedUserData() async {
    try {
      final pref = await SharedPreferences.getInstance();
      final userDataStr = pref.getString('userData');
      if (userDataStr != null) {
        _userData = json.decode(userDataStr);
        // 测试打印
        print('HomeScreen :extractedUserData2${_userData.toString()}');
        print('extractedUserData uid: ${_userData?['uid']}');
        print('extractedUserData user_name: ${_userData?['user_name']}');
        print('extractedUserData user_email: ${_userData?['user_email']}');
      }
    } catch (e) {
      print('用户数据解析失败：$e');
    } finally {
      if(mounted) {
        setState(() {
          _isLoading = false;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home"),
      ),
      body: _isLoading 
          // 加载中展示进度条
          ? const Center(child: CircularProgressIndicator())
          : Column(
              children: [
                // 直接调用成员变量展示用户数据
                Text("用户ID：${_userData?['uid'] ?? '未获取到'}"),
                Text("用户名：${_userData?['user_name'] ?? '未获取到'}"),
                Text("用户邮箱：${_userData?['user_email'] ?? '未获取到'}"),
                Center(
                  child: ElevatedButton(
                    onPressed: () {
                      Navigator.of(context).pushReplacementNamed('/');
                      Provider.of<Auth>(context, listen: false).logout();
                    },
                    style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                      backgroundColor: Colors.green,
                    ),
                    child: const Text('logout'),
                  )
                ),
              ],
            ),
    );
  }
}

补充说明 #

• 代码中增加了异常捕获逻辑，避免SharedPreferences无对应数据、json解析失败时引发崩溃
• 增加了mounted判断，避免页面销毁后调用setState引发的内存泄漏问题
• 原代码中使用的RaisedButton已在新版本Flutter中废弃，同步替换为官方推荐的ElevatedButton组件

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