Flutter调用SharedPref取值判断渲染Widget不生效如何解决？

根因 #

问题核心是异步方法执行时序和同步渲染逻辑不匹配：getSharedPref是异步方法，调用后不会阻塞后续代码执行，buildFab会在then回调给isShared赋值前就返回结果，所以永远拿不到最新的异步返回值做渲染判断。

修复方案 #

使用Flutter官方提供的FutureBuilder组件处理依赖异步结果的渲染场景，它会自动监听异步任务的执行状态，结果返回后自动触发重绘：

// 原有异步方法可直接复用，简化后写法如下
Future<bool> getSharedPref() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getString("abc") == "xyz";
}

Widget buildFab() {
  return FutureBuilder<bool>(
    future: getSharedPref(),
    // 加载完成前的默认值，可根据业务调整
    initialData: false,
    builder: (context, snapshot) {
      // 可选：加载过程中返回占位组件
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const SizedBox(height: 45);
      }
      // 可选：异常场景兼容
      if (snapshot.hasError) {
        return const SizedBox(height: 45);
      }
      final bool isShared = snapshot.data ?? false;
      return isShared 
        ? const SizedBox(height: 45) 
        : SizedBox(
            height: 45.0,
            width: 45.0,
            child: FabContainer(
              icon: Feather.plus,
              mini: true,
            ),
          );
    },
  );
}

额外优化建议 #

• 如果该判断逻辑在多个页面使用，可以提前将SharedPreferences的读取结果存入全局状态，避免重复读取本地存储
• 如果需要更灵活的状态联动，也可以结合StatefulWidget的setState、Provider等状态管理方案实现，原理和FutureBuilder一致，都是在异步结果返回后触发重绘

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