Dart中如何无需异步调用SharedPreferences 解决Future无法赋值给Widget问题

错误的核心原因是_show()是异步函数，返回的是Future类型，而Container的child参数要求传入Widget类型，二者类型不匹配才会抛出这个报错。

修复方案：使用FutureBuilder处理异步渲染 #

Flutter提供了FutureBuilder组件专门用来对接异步操作的UI渲染，修改代码如下：

1. 容器部分代码替换为： #

Container(
  child: FutureBuilder<int?>(
    future: _show(),
    builder: (context, snapshot) {
      // 异步加载中时的展示UI
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Text("加载中...");
      }
      // 读取到值时展示文本
      if (snapshot.hasData) {
        return Text(snapshot.data.toString());
      }
      // 读取失败/无对应值时的兜底UI
      return const Text("未获取到数据");
    },
  ),
  height: 40,
  width: MediaQuery.of(context).size.width - 230,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
    boxShadow: const [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 6,
        offset: Offset(0, 2)
      ),
    ],
  ),
)

2. _show函数无需大幅修改，仅需明确返回值类型即可： #

Future<int?> _show() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getInt('key');
}

补充优化方案（适合多位置依赖该值的场景） #

如果当前页面有多个地方需要用到从SharedPreferences读取的这个值，你也可以在页面初始化阶段提前取值，存在State的变量里再渲染：

1. 先在State类中定义变量：

int? _myVar;

2. 在initState中执行异步取值：

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

Future<void> _loadData() async {
  final prefs = await SharedPreferences.getInstance();
  setState(() {
    _myVar = prefs.getInt('key');
  });
}

3. 直接使用变量渲染即可：

Container(
  child: Text(_myVar?.toString() ?? "未获取到数据"),
  // 其余容器属性保持不变
)

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