如何在 Flutter 中添加带有图标的按钮

Question

我的应用程序中有一个按钮，例如

下面是相同的代码

Widget loginButtonChild = const Text(
  "Log in",
  style: TextStyle(
    color: Colors.white,
    fontFamily: "OpenSans-Regular",
  ),
);


FlatButton.icon(
  shape: RoundedRectangleBorder(
    borderRadius: new BorderRadius.circular(18.0),
    side: BorderSide(color: Colors.red)),
  color: Colors.red,
  label: loginButtonChild, 
  icon: Icon(Icons.arrow_forward ), 
  onPressed: () {
   //some function
  },
)

我正在尝试创建一个类似的按钮

任何人都可以在这方面提供帮助或任何建议吗？

Answer 1

首先，FlatButton并RaisedButton已弃用。使用TextButton和ElevatedButton代替。

如果要将图标添加到文本按钮，请使用ElevatedButton.icon或TextButton.icon构造函数。它将在文本的左侧添加图标。

但是，如果您想将图标添加到文本的右侧。用文本交换图标，反之亦然。这是有效的，因为图标和文本参数都是Widget

// icon before text
ElevatedButton.icon(
  icon: Icon(Icons.arrow_forward, size: 16),
  label: Text('Icon Button'),
  onPressed: () => {},
),

// icon after text
ElevatedButton.icon(
  icon: Text('Icon Button'),
  label: Icon(Icons.arrow_forward, size: 16),
  onPressed: () => {},
),

现场演示