Flutter DropdownButtonFormField选中项显示异常及字体配置求助

问题分析 #

选中项显示不全的核心原因是未配置选中项的字体大小，默认字体偏大，加上容器高度固定为40px，导致文本被截断。同时需要保证下拉选项与选中项的字体样式统一，避免视觉不一致。

解决方案 #

通过以下步骤修复：

• 给DropdownButtonFormField添加style属性，设置选中项的字体大小及样式
• 同步调整DropdownMenuItem中Text的字体样式，保持下拉列表与选中项视觉一致
• 微调contentPadding，避免文本与图标/边框过度挤压

修改后的代码 #

LayoutBuilder(
  builder: (context, constraints) {
    // 统一字体样式，方便复用
    final dropdownTextStyle = TextStyle(fontSize: 12, color: Colors.black);
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          height: 40,
          width: constraints.maxWidth * 0.55,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
          ),
          child: DropdownButtonFormField(
            isExpanded: true,
            // 设置选中项的字体样式
            style: dropdownTextStyle,
            onChanged: (value) {},
            items: _dropdownDate.map((value) => DropdownMenuItem(
              child: Text(value, style: dropdownTextStyle),
              value: value,
            )).toList(),
            elevation: 4,
            dropdownColor: Colors.white,
            decoration: InputDecoration(
              prefixIcon: const Icon(Icons.calendar_month, size: 16),
              hintText: 'Select Date',
              hintStyle: TextStyle(fontSize: 12),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: const BorderSide(
                  width: 0.8,
                  color: Colors.grey,
                )),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: const BorderSide(
                  width: 0.8,
                  color: Colors.grey,
                )),
              // 微调内边距，避免文本被挤压
              contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
              fillColor: Colors.white
            ),
          ),
        ),
        Container(
          height: 40,
          width: constraints.maxWidth * 0.40,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
          ),
          child: DropdownButtonFormField(
            isExpanded: true,
            style: dropdownTextStyle,
            onChanged: (value) {},
            items: _dropdownTime.map((value) => DropdownMenuItem(
              child: Text(value, style: dropdownTextStyle),
              value: value,
            )).toList(),
            elevation: 4,
            dropdownColor: Colors.white,
            decoration: InputDecoration(
              prefixIcon: const Icon(Icons.calendar_month, size: 16),
              hintText: 'Select Time',
              hintStyle: TextStyle(fontSize: 12),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: const BorderSide(
                  width: 0.8,
                  color: Colors.grey,
                )),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: const BorderSide(
                  width: 0.8,
                  color: Colors.grey,
                )),
              contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
              fillColor: Colors.white
            ),
          ),
        ),
      ],
    );
  }
),

关键修改点说明 #

1. style属性：直接作用于选中后显示的文本，设置fontSize:12与提示文本大小一致，避免截断
2. 统一dropdownTextStyle：复用样式变量，保证下拉选项和选中项字体大小统一
3. 调整contentPadding：将EdgeInsets.all(16)改为垂直方向12，减少垂直方向的内边距，给文本留出更多显示空间

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