Flutter中FindDropdown组件选中项文字过长溢出问题如何解决？

你可以通过自定义选中项的布局样式解决长文本溢出问题，两种可行修改方案如下：

• 方案1：自定义selectedItemBuilder参数，给选中文本添加溢出省略规则
  你可以直接使用FindDropdown提供的selectedItemBuilder参数自定义选中项的渲染逻辑，给文本组件加上溢出处理，修改后的代码如下：

Theme(
  data: ThemeData.light().copyWith(
    primaryColor: azulTuti,
    accentColor: azulTuti,
    colorScheme: ColorScheme.light(primary: azulTuti),
    buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary),
  ),
  child: FindDropdown(
    searchBoxDecoration: InputDecoration(hintText: "Seleccione un local"),
    selectedItem: selected_local,
    items: locales,
    key: UniqueKey(),
    // 新增自定义选中项布局的代码
    selectedItemBuilder: (context, item) {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: 8),
        child: Text(
          item.toString(),
          overflow: TextOverflow.ellipsis, // 超长文本末尾加省略号
          maxLines: 1,
        ),
      );
    },
    onChanged: (local) {
      if (local != "Seleccione un local") {
        setState(() {
          selected_local = local;
          chooseLocal = true;
          zoomMarker(selected_local);
        });
      }
    },
  )
)

• 方案2：外层包裹限制宽度的组件
  如果你的下拉框是放在Row等弹性布局容器内，可以在外层套Flexible或者Expanded组件，限制下拉框的最大宽度不超过父容器的可用宽度：

// 假设你是放在Row布局内的场景
Row(
  children: [
    // 其他组件
    Flexible( // 新增外层Flexible限制宽度
      child: Theme(
        // 你原来的Theme和FindDropdown代码
      ),
    ),
    // 其他组件
  ],
)

以上两种方案组合使用可以覆盖绝大多数溢出场景，如果下拉选项列表内的文本也存在溢出问题，可以同样自定义dropdownItemBuilder参数处理列表项的文本样式即可。

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