监听StateNotifier无法捕获后续状态的问题排查

问题场景 #

在使用flutter_typeahead的TypeAheadFormField组件时，通过suffixIcon监听加载状态控制加载图标显示。首次搜索后，明明执行了状态重置为false的代码，但suffixIcon始终无法捕获该状态，导致加载图标一直显示。

相关代码 #

SuffixIcon 实现 #

Widget suffixIcon(BuildContext context) {
  final isLoading = provider.watch(boolProvider);
  return isLoading
      ? SizedBox(
          width: SUFFIX_ICON_WIDTH_LENGTH,
          height: SUFFIX_ICON_HEIGHT_LENGTH,
          child: Stack(children: [
            Positioned(
              top: PAD_S,
              right: SUFFIX_ICON_PAD,
              child: CircularProgressIndicator(
                  backgroundColor: Theme.of(context).primaryColorDark),
            )
          ]))
      : Container(width: 0);
}

StateNotifier 定义 #

final boolProvider = StateNotifierProvider<BoolStateNotifier, bool>((provider) {
  return BoolStateNotifier(isLoading: false);
});

class BoolStateNotifier extends StateNotifier<bool> {
  BoolStateNotifier({required bool isLoading}) : super(isLoading);

  void setState(bool newState) {
    state = newState;
  }
}

Search 方法实现 #

FutureOr<Iterable<Suggestion<TSuggestion>>> search(String input) async {
  if (input.isNotEmpty) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      provider.read(boolProvider.notifier).setState(true);
    });
    final results =
        (await repository.search(mapInputToSearchParams(input)))?.data;
    provider.read(boolProvider.notifier).setState(false);
    // 省略返回结果逻辑
  }
  // 省略空输入处理逻辑
}

问题原因 #

核心问题是addPostFrameCallback导致的状态更新顺序颠倒：

• addPostFrameCallback会将setState(true)推迟到当前帧绘制完成后执行
• 异步网络请求await repository.search(...)完成后，会立刻执行setState(false)
• 首次搜索时组件处于初始构建阶段，setState(false)先执行，之后setState(true)才在下一帧触发，最终状态停留在true，导致加载图标无法隐藏

解决方案 #

移除addPostFrameCallback，直接在网络请求前同步设置加载状态为true，同时用try/finally确保请求无论成功或失败都能重置状态：

FutureOr<Iterable<Suggestion<TSuggestion>>> search(String input) async {
  if (input.isNotEmpty) {
    // 直接设置加载状态，无需PostFrameCallback
    provider.read(boolProvider.notifier).setState(true);
    try {
      final results =
          (await repository.search(mapInputToSearchParams(input)))?.data;
      // 处理搜索结果逻辑
    } finally {
      // 确保请求结束后必重置加载状态
      provider.read(boolProvider.notifier).setState(false);
    }
    // 返回处理后的结果
  }
  // 空输入时的返回逻辑
}

额外优化建议 #

• 给BoolStateNotifier的方法改名，语义更清晰：

class BoolStateNotifier extends StateNotifier<bool> {
  BoolStateNotifier({required bool isLoading}) : super(isLoading);

  void setLoading(bool isLoading) {
    state = isLoading;
  }
}

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