带有颤振中的文本和图标的圆形按钮

Question

如何为 flutter 添加带有文本和图标的按钮？

我想要一个 button 看起来像带有文本的图标，可以放在屏幕底部

例如这里的图标：android-button-with-icon-and-text

Answer 1

您可以使用包含 Column（用于在图标下方显示文本）或 Row（用于图标旁边的文本）的 FlatButton，然后有一个 Icon 小部件和一个 Text 小部件作为 children.

这是一个例子：

class MyPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) =>
      Scaffold(
        appBar: AppBar(
          title: Text("Hello world"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                onPressed: () => {},
                color: Colors.orange,
                padding: EdgeInsets.all(10.0),
                child: Column( // Replace with a Row for horizontal icon + text
                  children: <Widget>[
                    Icon(Icons.add),
                    Text("Add")
                  ],
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => {},
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      );
}

这将产生以下结果：

Answer 2

编辑 1： 随着 Flutter 1.20 的发布，Flutter 团队进行了重大更改，引入了新按钮。所以下面提到的按钮类型已被弃用。使用 TextButton instead of FlatButton and ElevatedButton instead of RaisedButton.

TextButton.icon(onPressed: null, icon: null, label: null);
Elevated.icon(onPressed: null, icon: null, label: null);

查看按钮及其主题的重大更改 here

注意：FlatButton 和 RaisedButton 已弃用

您可以简单地使用命名构造函数来创建不同类型的带有图标的按钮。例如

FlatButton.icon(onPressed: null, icon: null, label: null);
RaisedButton.icon(onPressed: null, icon: null, label: null);

但是，如果您有特定要求，那么您始终可以创建具有不同布局的自定义按钮，或者简单地将小部件包装在 GestureDetector 中。

Answer 3

在子按钮中使用 Column 或 Row，水平按钮使用 Row，垂直使用 Column，并且不要忘记 contain 它具有您需要的大小：

Container(
  width: 120.0,
  height: 30.0,
  child: RaisedButton(
    color: Color(0XFFFF0000),
    child: Row(
      children: <Widget>[
        Text('Play this song', style: TextStyle(color: Colors.white),),
        Icon(Icons.play_arrow, color: Colors.white,),
      ],
    ),
  ),
),

Answer 4

你可以这样做，

RaisedButton.icon( elevation: 4.0,
                    icon: Image.asset('images/image_upload.png' ,width: 20,height: 20,) ,
                      color: Theme.of(context).primaryColor,
                    onPressed: getImage,
                    label: Text("Add Team Image",style: TextStyle(
                        color: Colors.white, fontSize: 16.0))
                  ),

Answer 5

截图：

SizedBox.fromSize(
  size: Size(56, 56), // button width and height
  child: ClipOval(
    child: Material(
      color: Colors.orange, // button color
      child: InkWell(
        splashColor: Colors.green, // splash color
        onTap: () {}, // button pressed
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.call), // icon
            Text("Call"), // text
          ],
        ),
      ),
    ),
  ),
)

Answer 6

如果您需要这样的按钮：

您可以使用 RaisedButton 并使用 child 属性来执行此操作。您需要添加一个行，在行内您可以添加一个 Text 小部件和一个 Icon 小部件来实现此目的。如果你想使用 png 图像，你可以使用类似的小部件来实现这一点。

RaisedButton(
    onPressed: () {},
    color: Theme.of(context).accentColor,
    child: Padding(
      padding: EdgeInsets.fromLTRB(
          SizeConfig.safeBlockHorizontal * 5,
          0,
          SizeConfig.safeBlockHorizontal * 5,
          0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            'Continue',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.w700,
              color: Colors.white,
            ),
          ),
          Icon(
            Icons.arrow_forward,
            color: Colors.white,
          )
        ],
      ),
    ),
  ),

Answer 7

如果你需要文字居中，图片居中，像这样：

然后你可以用这个小部件树来实现它：

RaisedButton(
  onPressed: () {},
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Expanded(child: Text(
        'Push it! '*10,
        textAlign: TextAlign.center,
      ),),
      Image.network(
        'https://picsum.photos/250?image=9',
      ),
    ],
  ),
),

Full example available on my dartpad.dev (link).

Answer 8

我通常的做法是在凸起按钮中嵌入一行：

class Sendbutton extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return RaisedButton(
          onPressed: () {},
          color: Colors.black,
          textColor: Colors.white,
          child: Row(
            children: <Widget>[
              Text('Send'),
              Icon(Icons.send)
            ],
          ),

        );
      }
    }

Answer 9

恭喜前面的答案...但我意识到如果图标是连续的（比如上图中所示的三个图标），您需要调整列和行。

这是代码

 Column(
        crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  FlatButton(
                      onPressed: () {},
                      child: Icon(
                        Icons.call,
                      )),
                  FlatButton(
                      onPressed: () {},
                      child: Icon(
                        Icons.message,
                      )),
                  FlatButton(
                      onPressed: () {},
                      child: Icon(
                        Icons.block,
                        color: Colors.red,
                      )),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Text(
                    '   Call',
                  ),
                  Text(
                    'Message',
                  ),
                  Text(
                    'Block',
                    style: TextStyle(letterSpacing: 2.0, color: Colors.red),
                  ),
                ],
              ),
            ],
          ),

Here is the result

Answer 10

FlatButton、RaisedButton 和 OutlineButton 小部件已分别替换为 TextButton、ElevatedButton 和 OutlinedButton。

把这段代码作为按钮放在下面。此外，已接受的答案已于 2021 年 9 月更新。

TextButton.icon(
    style: TextButton.styleFrom(
      textStyle: TextStyle(color: Colors.blue),
      backgroundColor: Colors.white,
      shape:RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24.0),
      ), 
    ),
    onPressed: () => {},
    icon: Icon(Icons.send_rounded,),
    label: Text('Contact me',),
  ),

Answer 11

在最新版本的 Flutter 中，我认为你可以像这样使用 Just IconButton Widget :

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      IconButton(
        icon: const Icon(Icons.volume_up),
        onPressed: () {},
      ),
      Text('Volume')
    ],
  );
}

希望这对您有所帮助，请从这里了解更多信息 documentation。

Answer 12

颤振 2.4:

最好的推荐方法是使用ShapeDecoration

这是一个使用 Inkwell 的示例（模拟按钮，但您可以使用按钮代替并获得相同的结果）。

InkWell(          
      onTap: (){},
      child: Container(        
               width: 50,
               height: 50,
               decoration: ShapeDecoration(
                             shape: CircleBorder(), //here we set the circular figure
                             color: Colors.red
                           ),
                         child: Center(
                              child: Icon(
                                     Icons.email,
                                     size: 30,
                                      color: Colors.white,
                                      )
                            ),
                        )
)

这些是 ShapeDecoration 中可能的形状：

RoundedRectangleBorder(),
BeveledRectangleBorder(),
ContinuousRectangleBorder(),
CircleBorder(),

link 结果示例：https://images.vexels.com/media/users/3/140138/isolated/preview/88e50689fa3280c748d000aaf0bad480-icono-de-ronda-de-correo-electronico-1.png

Answer 13

希望对您有所帮助。我正在使用 flutter 2.10.1

ElevatedButton.icon(onPressed: null, icon: null, label: null);

如何使用ElevatedButton.icon

ElevatedButton.icon(
        icon: const Icon(
          Icons.add_circle,
          color: Colors.white,
        ),
        onPressed: onPressed,
        label: Text(
          "Schedule",
          style: const TextStyle(
              fontSize: 16,
              color: Colors.white),
        ),
        style: ElevatedButton.styleFrom(
          primary: Color.fromARGB(255, 3, 133, 194),
          fixedSize: const Size(208, 43),
        ),
      )

您可以在此处阅读文档：https://api.flutter.dev/flutter/material/ElevatedButton/ElevatedButton.icon.html

带有颤振中的文本和图标的圆形按钮

Round button with text and icon in flutter

icons

flutter