Flutter中如何在TextField的onSubmitted回调中调用异步函数？

问题核心 #

onSubmitted是同步回调函数，不能直接在其内部使用await，但可以通过以下两种方式解决：

方案一：用异步匿名函数包裹调用 #

直接将onSubmitted的回调改为异步匿名函数，就能在内部使用await调用你的_fillstock函数：

TextField(
  decoration: InputDecoration.collapsed(hintText: "name"),
  onSubmitted: (String text) async {
    await _fillstock(text);
  },
)

你的_fillstock函数本身已经通过setState更新了nChange，调用后会自动触发UI重绘，Text("$nChange")就能显示最新值。

方案二：正确使用FutureBuilder（推荐） #

你之前的FutureBuilder用法有误，原因是把包含setState的_fillstock直接作为future参数，且builder逻辑错误。正确的做法是将数据获取和UI更新分离：

1. 抽离数据获取逻辑为独立的Future函数：

Future<double?> _fetchStockChange(String text) async {
  final stock = await fromtext(text);
  final Map<String, dynamic> data = (await stock?.get_data())!;
  return data['change'];
}

2. 在State类中添加变量保存当前请求的Future：

Future<double?>? _currentFetchFuture;

3. 修改onSubmitted触发请求：

TextField(
  decoration: InputDecoration.collapsed(hintText: "name"),
  onSubmitted: (String text) {
    setState(() {
      _currentFetchFuture = _fetchStockChange(text);
    });
  },
)

4. 在build中使用FutureBuilder构建UI：

FutureBuilder<double?>(
  future: _currentFetchFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator(); // 加载中状态
    } else if (snapshot.hasError) {
      return Text('加载失败: ${snapshot.error}'); // 错误状态
    } else {
      final change = snapshot.data;
      return Text(change != null ? '$change' : '暂无数据'); // 正常显示
    }
  },
)

这种方式更符合Flutter的响应式UI设计，能清晰处理加载、错误、成功三种状态。

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