第五十六回：如何在Button中同时显示文字和图标

我们在上一章回中介绍了命名路由相关的内容，本章回中将介绍 如何在Button中同时显示文字和图标.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在项目中的使用Button大部分是文字形式的按钮，就是在按钮上面显示文字，通过文字来了解按钮的功能。也有一部分是图标形式的按钮，就是在按钮上面显示图标，通过图标来了解按钮的功能，这两种形式的按钮分别可以用ElevatedButton和IconButton这两种组件来实现。

有时候需要在按钮上面同时显示文字和图标，怎么办？看官莫急，我们可以使用TextButton组件来实现。本章回中将介绍详细的实现方法。

实现方法

我们可以通过TextButton的icon()方法在按钮上面同时显示文字和图标，下面是该组件提供的属性：

• icon属性：主要用来显示按钮上的图标；
• label属性：主要用来显示按钮上的文字；
• onPressed属性：主要用来响应按钮的事件；

我们只需要给前两个属性赋值就可以在按钮上同时显示文字和图标,不过图标只能放在文字前面，不能调整图标和文字和前后顺序，这也算是一个缺点吧。

此外，我们可以通过icon属性来控制图标的大小和颜色（默认的图标颜色和文字颜色相同）。给icon属性赋值时需要使用Icon类的对象，该类提供了相关的属性来控制图标的风格，下面是Icon类中常用的属性：

• size属性：主要用来控制图标的大小；
• color属性：主要用来控制图标的颜色；

示例代码