Question

如何为flutter提供带有文字和图标的按钮？

我希望button看起来像带有能够放在屏幕底部的文字的图标

例如，图标就像在这里：android-button-with-icon-and-text

Answer 1

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

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

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

Answer 2

如果您需要这样的按钮：

您可以使用Text并使用child属性来执行此操作。您需要添加一个行，并在内部行中添加一个Icon小部件和一个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, ) ], ), ), ),小部件以实现此目的。如果要使用png图像，则可以使用类似的小部件来实现。

{{1}}

Answer 3

我通常的做法是在“升高”按钮中嵌入一行：

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 4

您可以使用FlatButton包含Column（用于在图标下方显示文字）或Row（用于图标旁边的文字）来实现这一目标，然后将Icon小部件和Text小部件作为子级。

以下是一个例子：

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 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

在Button子项中使用Column或Row，将Row用作水平按钮，将Column用作垂直按钮，并且不要忘记包含所需的大小：

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 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

恭喜您以前的回答...但是我意识到，如果图标是连续的（例如上图所示的三个图标），则需要处理列和行。

这是代码

 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 9

您可以做类似的事情，

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))
                  ),

圆形按钮，文字和图标在颤动

9 个答案: