Flutter Autocomplete建议被软键盘遮挡，需设置为始终显示于键盘上方

解决Flutter Autocomplete建议列表被键盘遮挡的问题 #

要让Autocomplete的建议列表始终显示在键盘上方，核心是调整optionsViewBuilder中的布局逻辑，让列表避开键盘区域，优先显示在合适的位置。以下是具体修改方案：

步骤1：添加全局Key获取输入框位置 #

先给TextFormField添加一个GlobalKey，用于获取输入框在屏幕上的位置信息：

final _fieldKey = GlobalKey();

步骤2：修改optionsViewBuilder布局 #

替换原有的Align组件，改用Positioned结合输入框位置、键盘高度计算列表的显示位置，确保列表避开键盘：

optionsViewBuilder: (context, onSelected, options) {
  // 获取输入框的渲染尺寸与屏幕偏移
  final renderBox = _fieldKey.currentContext?.findRenderObject() as RenderBox?;
  final fieldSize = renderBox?.size ?? Size.zero;
  final fieldOffset = renderBox?.localToGlobal(Offset.zero) ?? Offset.zero;

  // 获取当前键盘高度
  final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;

  return Positioned(
    width: constraint.maxWidth,
    // 将列表定位在输入框上方，同时限制最大高度避免超出屏幕
    top: fieldOffset.dy - (options.length > 5 ? 300 : options.length * 50),
    child: Material(
      elevation: 5,
      child: ConstrainedBox(
        constraints: BoxConstraints(
          maxWidth: constraint.maxWidth,
          maxHeight: 300,
        ),
        child: ListView.separated(
          shrinkWrap: true,
          padding: const EdgeInsets.symmetric(vertical: 16),
          itemBuilder: (context, index) {
            return InkWell(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                child: Text(options.elementAt(index)),
              ),
              onTap: () {
                onSelected(options.elementAt(index));
              },
            );
          },
          separatorBuilder: (context, index) => Divider(
            color: Colors.grey.withOpacity(0.3),
          ),
          itemCount: options.length,
        ),
      ),
    ),
  );
},

步骤3：给TextFormField绑定全局Key #

在fieldViewBuilder的TextFormField中添加key: _fieldKey：

return TextFormField(
  key: _fieldKey, // 绑定全局Key
  controller: controller,
  focusNode: focusNode,
  onEditingComplete: onEditingComplete,
  decoration: InputDecoration(
    border: const OutlineInputBorder(),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Theme.of(context).colorScheme.primary)
    ),
    hintText: "Search your country"
  ),
  keyboardType: TextInputType.text,
);

额外提示 #

• 确保所在Scaffold的resizeToAvoidBottomInset属性为true（默认值），页面会自动调整基础布局避开键盘。
• 若偏好列表显示在输入框下方，可将Positioned的top改为bottom: keyboardHeight + 8，同时确保输入框下方有足够显示空间。

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