Flutter中如何设置DropdownMenu选项字体样式并解决溢出问题

针对你遇到的DropdownMenu选项文本溢出问题，可通过以下方式调整样式，同时保留搜索功能：

核心修改方案 #

通过自定义下拉选项的文本组件，结合全局样式配置，同时处理字体大小和文本溢出：

import 'package:flutter/material.dart';

enum MalhaLabel {
  malha1('010 dime: omissão de entrega'),
  malha2('NF-e: Cálculo: Exemplo de texto longo que causaria overflow na lista do dropdown');

  const MalhaLabel(this.label);
  final String label;
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final TextEditingController malhaController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(70.0),
        child: AppBar(
          titleSpacing: 0.00,
          leading: Builder(
            builder: (BuildContext context) {
              return IconButton(
                onPressed: () {
                  Scaffold.of(context).openDrawer();
                },
                icon: const Icon(Icons.filter_alt_outlined),
              );
            },
          ),
          title: const Text(
            'AUDITORIA | MALHAS FISCAIS',
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
          backgroundColor: const Color(0xFF1C5D22),
        ),
      ),
      drawer: Container(
        width: 350,
        child: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const SizedBox(
                height: 90.0,
                child: DrawerHeader(
                  decoration: BoxDecoration(
                    color: Color(0xFF1C5D22),
                  ),
                  child: Row(
                    children: [
                      Icon(
                        Icons.filter_alt_outlined,
                        color: Colors.white,
                      ),
                      SizedBox(width: 16),
                      Text(
                        'FILTROS',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 20, top: 20),
                child: ListTile(
                  title: const Text(
                    'Malhas fiscais:',
                    style: TextStyle(fontSize: 16),
                  ),
                  subtitle: Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: DropdownMenu<MalhaLabel>(
                      controller: malhaController,
                      enableFilter: true,
                      requestFocusOnTap: true,
                      hintText: 'Digite e selecione',
                      // 统一设置输入框字体大小
                      textStyle: const TextStyle(fontSize: 14),
                      // 限制下拉菜单最小宽度，避免选项挤压
                      menuStyle: MenuStyle(
                        minimumSize: MaterialStateProperty.all(const Size(300, 0)),
                      ),
                      dropdownMenuEntries: MalhaLabel.values.map<DropdownMenuEntry<MalhaLabel>>(
                        (MalhaLabel malha) {
                          return DropdownMenuEntry<MalhaLabel>(
                            value: malha,
                            // 自定义选项文本，处理溢出
                            child: Text(
                              malha.label,
                              style: const TextStyle(fontSize: 14),
                              // 可选方案1：超出显示省略号，最多2行
                              overflow: TextOverflow.ellipsis,
                              maxLines: 2,
                              // 可选方案2：自动换行显示全部文本
                              // maxLines: null,
                              // overflow: TextOverflow.visible,
                            ),
                          );
                        },
                      ).toList(),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键调整说明 #

• 字体大小控制：通过DropdownMenu的textStyle统一设置输入框字体，同时在选项的Text组件中单独定义选项字体，保证样式一致性。
• 文本溢出处理：利用Text组件的overflow和maxLines属性，可根据需求选择：
  • 显示省略号+限制行数：适合需要保持选项高度统一的场景
  • 自动换行：适合需要完整展示长文本的场景
• 菜单宽度优化：通过menuStyle设置minimumSize，避免下拉菜单因宽度不足导致文本挤压。

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