Flutter实现DropdownButton全屏宽度并在按钮下方展开的方法

需求：创建DropdownButton，点击后下拉菜单占满屏幕宽度，且在按钮下方展开（非覆盖/侧边显示）。

现有代码 #

调用代码：

_buildFullWidthDropdown(
  context: context,
  label: 'جنسیت',
  selectedValue: controller.selectedGender.value.isEmpty ? null : controller.selectedGender.value,
  items: controller.genders
      .map((gender) => DropdownMenuItem<String>(
            value: gender,
            alignment: AlignmentDirectional.bottomCenter,
            child: SizedBox(
              width: 700, // 期望全屏宽度
              child: Row(
                children: [
                  Icon(Icons.person),
                  SizedBox(width: 10),
                  Text(gender),
                ],
              ),
            ),
          ))
      .toList(),
  onChanged: (value) {
    setState(() {
      controller.selectedGender.value = value!;
    });
  },
);

下拉容器实现：

Widget _buildFullWidthDropdown({
  required BuildContext context,
  required String label,
  required String? selectedValue,
  required List<DropdownMenuItem<String>> items,
  required Function(String?) onChanged,
}) {
  return Container(
    width: MediaQuery.of(context).size.width * 0.4, // 当前按钮宽度
    padding: EdgeInsets.symmetric(horizontal: 16),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.circular(10),
    ),
    child: SizedBox(
      width: MediaQuery.of(context).size.width,
      child: Theme(
        data: Theme.of(context).copyWith(
            buttonTheme: ButtonTheme.of(context).copyWith(
          minWidth: MediaQuery.of(context).size.width,
        )),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<String>(
            hint: Padding(
              padding: const EdgeInsets.all(0.0),
              child: Text(label),
            ),
            isExpanded: true,
            value: selectedValue,
            items: items,
            onChanged: onChanged,
          ),
        ),
      ),
    ),
  );
}

当前问题 #

• 下拉菜单仅适配按钮宽度，无法占满屏幕宽度；
• 无法设置下拉菜单在按钮下方打开。

解决方案 #

方案一：基于原生DropdownButton修改（简单高效）

通过修改Theme配置强制下拉菜单全屏宽度，并指定菜单展开位置。注意：DropdownPosition需Flutter 3.10及以上版本支持。

修改后的_buildFullWidthDropdown：

Widget _buildFullWidthDropdown({
  required BuildContext context,
  required String label,
  required String? selectedValue,
  required List<DropdownMenuItem<String>> items,
  required Function(String?) onChanged,
}) {
  final screenWidth = MediaQuery.of(context).size.width;
  return Container(
    width: screenWidth * 0.4, // 保持按钮原有宽度
    padding: EdgeInsets.symmetric(horizontal: 16),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.circular(10),
    ),
    child: Theme(
      data: Theme.of(context).copyWith(
        // 设置下拉菜单全屏宽度
        dropdownMenuTheme: DropdownMenuThemeData(
          menuMaxWidth: screenWidth,
        ),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          hint: Text(label),
          isExpanded: true,
          value: selectedValue,
          items: items,
          onChanged: onChanged,
          // 指定菜单在按钮下方展开
          dropdownPosition: DropdownPosition.under,
        ),
      ),
    ),
  );
}

同时修改DropdownMenuItem的宽度设置，移除固定值改为自适应：

_buildFullWidthDropdown(
  context: context,
  label: 'جنسیت',
  selectedValue: controller.selectedGender.value.isEmpty ? null : controller.selectedGender.value,
  items: controller.genders
      .map((gender) => DropdownMenuItem<String>(
            value: gender,
            alignment: AlignmentDirectional.centerStart,
            child: SizedBox(
              width: double.infinity, // 自适应全屏宽度
              child: Row(
                children: [
                  Icon(Icons.person),
                  SizedBox(width: 10),
                  Text(gender),
                ],
              ),
            ),
          ))
      .toList(),
  onChanged: (value) {
    setState(() {
      controller.selectedGender.value = value!;
    });
  },
);

方案二：自定义下拉菜单（兼容性强，完全可控）

如果你的Flutter版本较低，或需要更灵活的样式控制，可通过OverlayEntry自定义下拉菜单：

class FullWidthDropdown extends StatefulWidget {
  final String label;
  final String? selectedValue;
  final List<String> items;
  final Function(String?) onChanged;

  const FullWidthDropdown({
    super.key,
    required this.label,
    required this.selectedValue,
    required this.items,
    required this.onChanged,
  });

  @override
  State<FullWidthDropdown> createState() => _FullWidthDropdownState();
}

class _FullWidthDropdownState extends State<FullWidthDropdown> {
  bool _isMenuOpen = false;
  late OverlayEntry _overlayEntry;
  final GlobalKey _buttonKey = GlobalKey();

  @override
  void dispose() {
    if (_isMenuOpen) _overlayEntry.remove();
    super.dispose();
  }

  void _toggleMenu() {
    setState(() => _isMenuOpen = !_isMenuOpen);
    if (_isMenuOpen) {
      _overlayEntry = _createOverlayEntry();
      Overlay.of(context).insert(_overlayEntry);
    } else {
      _overlayEntry.remove();
    }
  }

  OverlayEntry _createOverlayEntry() {
    final renderBox = _buttonKey.currentContext!.findRenderObject() as RenderBox;
    final size = renderBox.size;
    final offset = renderBox.localToGlobal(Offset.zero);

    return OverlayEntry(
      builder: (context) => Positioned(
        top: offset.dy + size.height, // 菜单固定在按钮下方
        left: 0,
        width: MediaQuery.of(context).size.width, // 全屏宽度
        child: Material(
          elevation: 4,
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: widget.items.length,
            itemBuilder: (context, index) {
              final item = widget.items[index];
              return ListTile(
                leading: Icon(Icons.person),
                title: Text(item),
                onTap: () {
                  widget.onChanged(item);
                  _toggleMenu();
                },
              );
            },
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      key: _buttonKey,
      width: MediaQuery.of(context).size.width * 0.4,
      padding: EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(10),
      ),
      child: GestureDetector(
        onTap: _toggleMenu,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(widget.selectedValue ?? widget.label),
            Icon(_isMenuOpen ? Icons.arrow_drop_up : Icons.arrow_drop_down),
          ],
        ),
      ),
    );
  }
}

使用自定义组件：

FullWidthDropdown(
  label: 'جنسیت',
  selectedValue: controller.selectedGender.value.isEmpty ? null : controller.selectedGender.value,
  items: controller.genders,
  onChanged: (value) {
    setState(() {
      controller.selectedGender.value = value!;
    });
  },
);

方案对比 #

• 方案一：代码改动小，适配原生样式，适合基础需求；
• 方案二：完全自定义布局，兼容性强，适合复杂交互/样式需求。

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