Flutter 2：带有图标和文本的按钮

Question

由于 RaisedButton、FlatButton 等已被弃用。 是否有任何关于按钮的小部件，提供文本和图标以防止创建行或其他解决方法？

Answer 1

您可以使用ElevatedButton.icon

这里是示例按钮：

代码：

 // Color state for button.
 Color _getTextColor(Set<MaterialState> states) => states.any(<MaterialState>{
    MaterialState.pressed,
    MaterialState.hovered,
    MaterialState.focused,
  }.contains)
      ? Colors.green
      : Colors.blue;

  Widget _myButton() {
     return ElevatedButton.icon(
        onPressed: () {/* do something here */ },
        icon: Icon(Icons.edit),
        style: ButtonStyle(backgroundColor: MaterialStateColor.resolveWith(_getTextColor)),
        label: Text(
          "Update",
          style: TextStyle(color: Colors.white),
        ));
  }

Answer 2

我在下面创建了一个名为 IconTextButton 的类：

class IconTextButton extends StatelessWidget {
  IconTextButton({@required this.title,@required this.onPressed, @required this.icon,this.color,this.shape});

  final Icon icon;
  final Color color;
  final Text title;
  final ShapeBorder shape;
  final void Function() onPressed;

  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: const EdgeInsets.symmetric(vertical: 10.0),
      child: MaterialButton(
        shape: shape,
        color: color,
        onPressed: onPressed,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            icon,
            title
          ],
        ),
      )
    );
  }
}

现在在你的代码中使用这个类：

IconTextButton(
 onPressed: (){

 },
 color: Colors.red,
 icon: Icon(Icons.home),
 title: new Text("Hello"),
),

现在你要开始编码了。 :)

Answer 3

您可以简单地使用 TextButton.icon() 构造函数。

TextButton.icon(
    icon: Icon(), // Your icon here
    label: Text(), // Your text here
    onPressed: (){},
)

有关 TextButton.icon() 构造函数的更多信息，您可以visit this site。