如何为Flutter中的TextButton组件添加尾部图标？

实现方案 #

给TextButton添加尾部图标有两种常用的实现方式：

方案1：自定义Row作为child（灵活性最高，适配你现有代码修改） #

直接修改你原代码的child属性，用Row组件排布文本和尾部图标即可，修改后代码如下：

TextButton(
  child: Center(
    // 用Row包裹文本和图标
    child: Row(
      mainAxisSize: MainAxisSize.min, // 让Row宽度适配内容，不会撑满父容器
      children: [
        Text(
          'Dummy', 
          style: GoogleFonts.openSans(
            color: Colors.white, 
            fontWeight: FontWeight.w400,
            fontSize: 28
          ),
        ),
        // 尾部图标，可自定义图标样式、间距
        SizedBox(width: 8), // 文本和图标之间的间距
        Icon(Icons.arrow_forward, color: Colors.white, size: 24)
      ],
    ),
  ),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => FourteenthRoute()),
    );
  }
),

方案2：使用TextButton.icon构造函数 #

如果不需要复杂的自定义布局，也可以用官方封装的构造函数，调整参数顺序即可实现图标在尾部：

TextButton.icon(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => FourteenthRoute()),
    );
  },
  // 注意：默认构造是图标在前、文本在后，调换两个参数位置即可实现图标在后
  label: Icon(Icons.arrow_forward, color: Colors.white, size: 24),
  icon: Text(
    'Dummy', 
    style: GoogleFonts.openSans(
      color: Colors.white, 
      fontWeight: FontWeight.w400,
      fontSize: 28
    ),
  ),
  style: ButtonStyle(
    padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 16, vertical: 8)),
    iconPadding: MaterialStateProperty.all(EdgeInsets.only(left: 8)) // 调整文本和图标的间距
  )
)

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