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 已弃用。改用 let first = new Promise((resolve, reject) => { setTimeout(() => { resolve(console.log('first')); }, 30); }); let second = new Promise((resolve, reject) => { setTimeout(() => { resolve(console.log('second')); }, 3); }); first.then(second); 和 TextButton。

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

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

Widget

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

Live Demo

Answer 2

使用

RaisedButton(
      onPressed: () {},
      padding: const EdgeInsets.symmetric(horizontal: 24),
      color: Colors.redAccent,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24),
      ),
      child: Row(
        children: <Widget>[
          Text("Label", style: TextStyle(color: Colors.white)),
          SizedBox(width: 6),
          Icon(Icons.chevron_right, color: Colors.white),
        ],
      ),
    ),

Answer 3

FlatButton.icon将图标放在左侧，您可以使用FlatButton，在子对象中放置带有标签+图标的Row，如下所示：

FlatButton(
  shape: RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)),
  color: Colors.red,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      loginButtonChild,
      const SizedBox(width: 8.0),
      Icon(Icons.arrow_forward),
    ],
  ),
  onPressed: () {
    //some function
  },
)

如果您希望按钮带有高程，只需将FlatButton更改为RaisedButton

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

3 个答案:

Live Demo