Widget重建后flutter_typeahead的Overlay点击事件失效问题求助

在Flutter开发中使用Riverpod与flutter_typeahead组件时遇到异常：

• 在Widget的build方法中添加final factory = ref.watch(formFactoryProvider);语句后，组件会频繁触发重建
• 此时flutter_typeahead组件的onSuggestionSelected点击事件完全失效（该组件的建议列表基于OverlayEntry实现）
• 移除上述ref.watch语句后，Overlay的点击事件恢复正常

简化后的flutter_typeahead使用代码如下：

@override
Widget nameTextField(
  SizingInformation sizingInfo,
  FormModel<dynamic> formModel,
  DetailsVm vm,
) {
  return Consumer(
    builder: (context, ref, child) => VpVgnItmsAutocompleteField.groceryItms(
      key: ref.watch(fieldKeyProvider(DetailsForm.nameControlName)),
      delayShowError: DELAY_SHOW_ERROR_DURATION,
      formControlName: DetailsForm.nameControlName,
      form: formModel.form,
      focusNode: focusNodeName,
      sizingInfo: sizingInfo,
      nextField: DetailsForm.companyNameControlName,
      onSelected: (TVgnItmSuggestion vi) async =>
          await vm.onVgnItmSelected(entity: vi.value),
      labelText: 'Grocery Item Name',
      hintText: 'Ex: Vegan Hunny Coconut Nectar...'.ellipses(),
      validationMessages: {
        'required': (error) => 'Please enter the name of the Grocery Item'
      },
    ),
  );
}

核心原因 #

flutter_typeahead的建议列表是挂载到全局Overlay层的，它的点击事件和当前组件的上下文、回调直接绑定。当你添加ref.watch(formFactoryProvider)导致组件频繁重建时：

1. 旧组件实例被销毁，对应的上下文和回调引用也跟着失效
2. 但已经显示的OverlayEntry还绑定着旧的失效引用，新组件重建后还没来得及将新的回调绑定到Overlay上
3. 最终导致点击建议项时，事件无法传递到有效的onSelected回调，看起来就像点击失效了

解决办法 #

• 缩小Provider监听范围：不要在整个输入组件的build方法中监听formFactoryProvider，只在真正需要使用该数据的子组件中用Consumer或Selector包裹，避免触发整个输入组件不必要的重建
• 保证组件Key稳定：你当前给输入组件用了fieldKeyProvider生成的Key，要确保这个Key不会随无关状态变化——如果Key频繁变更，组件会被彻底重建，Overlay的状态绑定也会混乱
• 手动管理Overlay生命周期：如果以上方法无效，可以在组件的dispose方法中主动关闭flutter_typeahead的建议列表，避免旧的OverlayEntry残留引发问题
• 改用ref.read替代ref.watch：如果formFactoryProvider的数据只是一次性读取，不需要实时监听更新，直接用ref.read(formFactoryProvider)代替ref.watch，这样就不会触发组件重建了

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