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：

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
          ],
        ),
      )
    );
  }
}

现在在您的代码中使用此 class ，例如：

IconTextButton(
 onPressed: (){

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

现在你是 go 来编码。 :)

Answer 3

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

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

有关 TextButton.icon() 构造函数的更多信息，您可以访问此站点。

Answer 4

尝试这个：

TextButton.icon(
  onPressed: () {
    print("edit");
  },
  icon: Icon(Icons.edit),
  label: Text("edit"),
),

Answer 5

您可以使用许多小部件创建该设计，简单的方法是添加

ElevatedButton.icon(
      icon: Icon(
        Icons.favorite,
        color: Colors.pink,
        size: 24.0,
      ),
      label: Text('Elevated Button'),)

您可以用文本和圆形按钮替换高架按钮，请参阅此链接https://www.flutterbeads.com/button-with-icon-and-text-flutter/

Answer 6

你可以像这样添加 TextButton.icon

TextButton.icon(
                icon: Icon(Icons.photo, color:Colors.black ),
                label: Text(
                  "Gallery",
                  style: TextStyle(color: Colors.black),
                ),
                onPressed: () {
                  // call method

                },

            ),