Flutter如何读取SharedPreferences的nome值传入其他类TextWidget

你现有写入逻辑已经能正常存值，不需要大改，只需要补读取和传值逻辑即可。另外你现有写入代码里两次调用SharedPreferences.getInstance()属于冗余代码，这个类是全局单例，只需要获取一次实例就能完成所有键值的读写，不影响现有功能，可以顺手优化。

1. 封装公共读取方法 #

把读取本地存储的逻辑抽成公共方法，后续所有页面需要读值都可以直接调用：

/// 读取本地存储的用户名
Future<String?> getStoredUserName() async {
  final SharedPreferences prefs = await SharedPreferences.getInstance();
  // 读取键为'nome'的字符串值，未存储时默认返回null
  return prefs.getString('nome');
}

2. 两种场景的实现方案 #

根据你的页面跳转逻辑选对应方案即可：

方案一：登录后直接跳转的页面，路由传参 #

适合登录成功后直接跳首页/用户中心的场景，读取到值之后直接通过路由构造函数传递给目标页面：

• 登录成功后的跳转逻辑：

// 调用login方法校验通过后
bool loginSuccess = await login();
if (loginSuccess) {
  // 先读取存好的用户名
  final String userName = (await getStoredUserName()) ?? '用户';
  // 跳转时传入目标页面
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(
      builder: (context) => HomePage(nome: userName),
    ),
  );
}

• 目标页面（接收参数并在Text中展示）：

class HomePage extends StatelessWidget {
  final String nome;
  // 构造函数接收传入的用户名
  const HomePage({super.key, required this.nome});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 直接在Text组件中使用传入的值
          Text('欢迎回来，$nome', style: TextStyle(fontSize: 18)),
          // 其他页面组件
        ],
      ),
    );
  }
}

方案二：跨多页面使用，组件内自行读取 #

如果用户名需要在多个不直接关联的页面展示，不需要层层传参，直接在需要展示的Text组件外包裹FutureBuilder处理异步读取逻辑即可：

class UserNameText extends StatelessWidget {
  const UserNameText({super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String?>(
      future: getStoredUserName(),
      builder: (context, snapshot) {
        // 读取过程中展示占位
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text('加载中...', style: TextStyle(fontSize: 16));
        }
        // 读取失败/无值时兜底
        final showName = snapshot.data ?? '游客';
        // 返回最终展示的文本组件
        return Text(
          showName,
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
        );
      },
    );
  }
}

后续任意页面需要展示用户名，直接引入UserNameText()组件即可，不需要额外传参。

注意：实现退出登录逻辑时，记得调用prefs.remove('nome')、prefs.remove('token')清除对应键的存储值，避免多账号登录时数据残留。

内容的提问来源于stack exchange，提问作者Gabriel G Maiworm