如何为Flutter的DropdownButton添加标签文本且选中值时标签可自适应大小

你需要的带自动调整大小标签的DropdownButton可以通过DropdownButtonFormField组件配合InputDecoration实现，Flutter原生已经自带选中值后标签上浮缩小的交互效果，不需要额外写动画逻辑，修改后的代码如下：

Container(
  width: MediaQuery.of(context).size.width * .71,
  child: DropdownButtonFormField(
    isExpanded: true,
    iconSize: 15,
    icon: Icon(Icons.keyboard_arrow_down),
    value: dropdownvalue,
    // 配置标签和下划线样式
    decoration: InputDecoration(
      // 这里设置你的标签文本
      labelText: "选择选项",
      // 标签默认样式
      labelStyle: TextStyle(
        fontSize: 14,
        fontWeight: FontWeight.w500,
        color: const Color(0xFFa5a5a5),
      ),
      // 选中后上浮的标签样式，自动调整为更小的字号
      floatingLabelStyle: TextStyle(
        fontSize: 10,
        fontWeight: FontWeight.w500,
        color: const Color(0xFFa5a5a5),
      ),
      // 自定义下划线样式，替换你原来的下划线实现
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(
          thickness: 1,
          color: const Color(0xFFa5a5a5),
        ),
      ),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(
          thickness: 1,
          color: const Color(0xFFa5a5a5),
        ),
      ),
    ),
    items: items.map((String item) {
      return DropdownMenuItem(
        value: item,
        child: Text(
          item,
          style: TextStyle(
            fontSize: 10,
            fontWeight: FontWeight.w500,
            color: const Color(0xFFa5a5a5),
          ),
        ),
      );
    }).toList(),
    onChanged: (newValue) {
      setState(() {
        dropdownvalue = newValue.toString();
      });
    },
  ),
),

核心逻辑说明 #

• 用DropdownButtonFormField替换原有DropdownButton，它继承自DropdownButton，原有配置逻辑完全兼容，同时支持输入装饰配置
• labelText属性直接配置你需要的标签文本，当选中值或者组件获得焦点时，标签会自动上浮，同时切换为floatingLabelStyle你设置的小字号样式，满足自动调整大小的需求
• 原来自定义的下划线逻辑直接挪到InputDecoration的边框配置里，效果和你原来的实现一致

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