Flutter中如何将已废弃的FlatButton.icon替换为TextButton？

不需要额外定义自定义类或函数即可完成适配，Flutter官方已经为TextButton提供了对应的.icon命名构造方法，参数和原来的FlatButton.icon基本对齐，你遇到的文字不显示问题大概率是参数对应错误或者样式适配问题。

你可以直接替换为以下代码：

Row(
  children: [
    TextButton.icon(
      onPressed: () => print('Live'),
      icon: const Icon(
        Icons.videocam,
        color: Colors.red,
      ),
      label: const Text('Live', style: TextStyle(color: Colors.black)),
      // 若需要调整按钮内边距、尺寸等可补充style参数，例如：
      // style: TextButton.styleFrom(padding: EdgeInsets.symmetric(horizontal: 8)),
    ),
  ],
)

如果替换后还是存在文字不显示的问题，可以按以下几点排查：

• 检查Text的样式是否将文字颜色设置为和按钮背景一致的颜色，导致视觉上看不到，默认TextButton的文字颜色会跟随全局主题配置，和旧版FlatButton的默认样式有区别
• 检查外层布局是否过度挤压了TextButton的显示宽度，导致文字被裁剪，可通过TextButton.styleFrom(minimumSize: Size(80, 40))设置最小宽高限制验证
• 确认你使用的是TextButton.icon构造而非普通的TextButton构造，普通TextButton仅接收一个child参数，错误传入icon和label会导致显示异常

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