Flutter中showModalBottomSheet内StatefulBuilder下TextField异常如何解决

• 变量作用域问题：_isFeedbackLoading声明在showModalBottomSheet的builder函数内部，每当键盘弹出触发布局更新时，整个bottomSheet的builder会重新执行，该变量会被重置为初始值false，导致弹窗状态被重置。
• context命名冲突：StatefulBuilder的builder参数自带的context覆盖了外层bottomSheet的context，调用MediaQuery.of(context)时读取的是StatefulBuilder的局部context，触发异常重建，导致弹窗直接回到初始状态。
• 手势事件冲突：GestureDetector默认的命中测试规则会拦截TextField的点击事件，配合焦点判断逻辑在重建时的时序问题，会出现输入框刚获取焦点就被强制失焦的情况，表现为键盘弹出一瞬间就收起。

快速修复（直接调整现有代码） #

修改以下三处即可正常运行：

1. 重命名StatefulBuilder的builder参数的context，避免覆盖外层context
2. 给GestureDetector添加命中测试行为，避免误拦截输入框点击
3. 调整状态变量的声明位置，避免重建时被重置

// 1. 将状态变量提到showModalBottomSheet外部，或者当前页面State的属性中，避免重建被重置
bool _isFeedbackLoading = false;
TextEditingController feedbackTextFieldController = TextEditingController();

...

showModalBottomSheet<void>(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext bottomSheetContext) { // 外层context重命名，避免冲突
      return StatefulBuilder(
        // 2. 这里的context重命名为statefulContext，不要覆盖外层context
        builder: (statefulContext, setState) => GestureDetector(
          // 3. 添加behavior，只有点击空白区域才触发onTap，不拦截输入框点击
          behavior: HitTestBehavior.translucent,
          onTap: () {
            FocusScopeNode currentFocus = FocusScope.of(statefulContext);
            if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
              currentFocus.focusedChild?.unfocus();
            }
          },
          child: AnimatedPadding(
            // 这里用外层的bottomSheetContext读取MediaQuery
            padding: MediaQuery.of(bottomSheetContext).viewInsets,
            duration: const Duration(milliseconds: 100),
            curve: Curves.decelerate,
            child: Container(
              child: _isFeedbackLoading
                  ? const Center(
                      child: CircularProgressIndicator(),
                    )
                  : TextField(
                      controller: feedbackTextFieldController,
                      textInputAction: TextInputAction.done,
                      textCapitalization: TextCapitalization.sentences,
                      maxLines: 2,
                      // 补全你自己的style和decoration配置即可
                    ),
            ),
          ),
        ),
      );
    },
  );

最优方案（推荐） #

如果你的弹窗逻辑包含多状态切换、表单校验等复杂逻辑，建议直接把整个弹窗的内容抽成一个独立的StatefulWidget，完全隔离context和状态管理，不会出现上述冲突问题，后续迭代维护也更清晰。

内容的提问来源于stack exchange，提问作者Gianclè Monna