Flutter中SharedPreferences跨页存读：返回主页变量无法实时显示

嘿，我懂你的困扰——在Phone_Page页面保存手机号到SharedPreferences后，回到主页得重启应用才能看到更新，这确实影响体验。问题的核心在于：主页的_loadvariable()方法只在页面初始化（initState）时执行了一次，当你从Phone_Page返回时，主页并没有触发重新读取SharedPreferences的操作，所以状态不会更新。

下面给你一个简单直接的解决方案，利用Flutter的Navigator返回值机制，确保返回主页后立即刷新数据：

步骤1：修改Phone_Page的保存逻辑，返回数据给主页 #

在Phone_Page的保存按钮点击事件里，保存完数据后，通过Navigator.pop把输入的手机号作为返回值传递给主页：

new FlatButton(
  child: const Text('save'),
  onPressed: () async {
    await _savevariable(); // 等待保存完成
    Navigator.pop(context, controller.text); // 将输入内容作为返回值传回主页
  }
)

同时，修正_savevariable()的逻辑（原来的setState包裹异步操作是错误的）：

_savevariable() async {
  // save variable
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString('variable', controller.text); // 等待保存完成
  setState(() {
    _variable = controller.text; // 更新当前页面的显示
  });
}

另外，Phone_Page的initState里的代码可以简化，去掉多余的?? ""：

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

步骤2：修改主页的导航逻辑，接收返回值并刷新数据 #

在主页的电话图标点击事件中，使用await接收Navigator.push的返回值，然后调用_loadvariable()重新读取SharedPreferences并更新状态：

IconButton(
  icon: Icon(Icons.phone),
  color: Colors.white,
  onPressed: () async {
    final result = await Navigator.push(
      context,
      new MaterialPageRoute(builder: (context) => new Phone_Page()),
    );
    // 不管是否有返回值，都重新加载数据确保最新
    await _loadvariable();
  },
),

为什么这样能解决问题？ #

当你从Phone_Page保存并返回时，主页的await Navigator.push会收到返回值，随后调用_loadvariable()，这个方法里的setState会触发主页的UI重建，重新读取SharedPreferences里的最新手机号，从而实现实时显示。

额外优化小建议 #

• 可以在主页的_loadvariable()里给_variable设置默认值，避免显示null：

_loadvariable() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  setState(() {
    _variable = prefs.getString('variable') ?? "未设置手机号";
  });
}

• Phone_Page里的删除按钮逻辑也可以优化，确保删除后立即更新显示：

new IconButton(
  icon: new Icon(Icons.delete),
  onPressed: () async {
    await _deletevariable();
    await _loadvariable();
  },
),

修改后的_deletevariable()：

_deletevariable() async {
  //delete variable
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.remove('variable');
}

这样修改后，你在Phone_Page保存手机号后返回主页，就能立刻看到最新的手机号啦！

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