Flutter实现返回主页面自动更新联系人列表（无需手动刷新）

问题背景 #

开发的Flutter应用支持从通讯录选择联系人并保存到SharedPreferences，主页面展示联系人列表。当前功能正常，但每次添加联系人后返回主页面，必须手动点击Load按钮才能刷新列表，希望实现返回时自动更新UI。

解决方法 #

1. 监听页面返回事件，自动加载数据 #

修改主页面中跳转到联系人选择页面的按钮逻辑，使用await等待页面返回，返回后立即调用数据加载方法刷新列表。

修改main.dart中"select contacts"按钮的onPressed方法：

RaisedButton(
  onPressed: () async {
    // 等待联系人选择页面关闭返回
    await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => Plugin1()),
    );
    // 返回后重新加载SharedPreferences中的数据并更新UI
    await loadSharedPrefs();
  },
  child: const Text('select contacts'),
),

2. 初始化自动加载（可选优化） #

在主页面的initState中调用loadSharedPrefs()，实现APP启动时自动加载联系人列表，无需手动点击Load按钮：

@override
void initState() {
  super.initState();
  // 页面初始化时自动加载数据
  loadSharedPrefs();
}

原理说明 #

• Navigator.push返回一个Future，当用户从联系人页面返回时，这个Future会完成，await后的代码会执行。
• loadSharedPrefs()方法会重新从SharedPreferences读取所有联系人数据，更新_list后调用setState触发UI重建，从而展示最新的联系人列表。

额外代码优化（可选） #

在deleteFromSharedPrefs方法中，可以直接使用类中已初始化的sharedPref实例，避免重复创建：

Future<void> deleteFromSharedPrefs(String key) async {
  print('deleting from SharedPref');
  await sharedPref.remove(key);
  print('deleted from SharedPref');
}

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