圆形按钮与文本和图标在颤振 [英] Round button with text and icon in flutter

问题描述

如何让一个带有文字和图标的按钮用于颤动？

我想要一个看起来像图标的按钮，其文字可以放在屏幕底部

例如，图标就像在这里：

how to have a button with text and icon for the flutter?

I wanted to have a button which looks like icon with a text that is able to put at the bottom of the screen

For example, the icon is like at here: android-button-with-icon-and-text

解决方案

You can achieve that by using a FlatButton that contains a Column (for showing a text below the icon) or a Row (for text next to the icon), and then having an Icon Widget and a Text widget as children.

Here's an example:

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

This will produce the following:

这篇关于圆形按钮与文本和图标在颤振的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！