Flutter中如何将ElevatedButton.icon组件的图标调整到文本右侧

你可以通过以下两种常用方式实现图标位于文本右侧的效果，适配你需要的下一步 ->样式：

方案1：自定义ElevatedButton子布局（推荐，灵活度最高） #

放弃使用默认的ElevatedButton.icon构造函数，直接自定义child属性的布局顺序，代码如下：

ElevatedButton(
  onPressed: onPressed,
  style: buttonStyle,
  child: Row(
    mainAxisSize: MainAxisSize.min, // 按钮宽度适配内容，不会强制撑满父容器
    children: [
      Text(label),
      SizedBox(width: 8), // 可自行调整文本和图标之间的间距
      Icon(
        icon,
        color: color,
        size: getIconSize(),
      ),
    ],
  ),
)

方案2：利用Directionality组件快速修改（无需改动原有ElevatedButton.icon结构） #

在外层包裹Directionality组件修改布局方向，即可快速让图标切换到右侧，不会影响中文/英文的正常阅读顺序：

Directionality(
  textDirection: TextDirection.rtl,
  child: ElevatedButton.icon(
    onPressed: onPressed,
    icon: Icon(
      icon,
      color: color != null ? color : null,
      size: getIconSize(),
    ),
    label: Text(label),
    style: buttonStyle,
  ),
)

注意：如果按钮内有复杂的富文本排版，更推荐使用方案1避免布局异常。

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