颤动图标按钮，下方带有文字说明

Question

我是 flutter 的新手，我需要使用下面带有文字描述的图像按钮。注意按钮和文本描述都应该位于一张卡片下，

即按钮下面应该有一个文字描述“通话时间”。

这是我的代码：

final userIcons = Row(
  children: <Widget>[
    new Card(color: Colors.deepOrangeAccent,
      shape: CircleBorder(),
      child: (SizedBox(
        height: 100.00,
        width: 100.0,
        child: new IconButton(highlightColor:Colors.deepOrangeAccent ,
            icon: Image.asset('assets/airtime.png'),
            onPressed: () {
              Navigator.of(context).pushNamed(Airtime.tag);
            }),


      )),

Answer 1

使用 aColumn以垂直顺序显示小部件：

Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Icon(...),
    Text(...),
  ],
)

Answer 2

您可以使用 aRaisedButton并拥有一个具有图标和文本的行/列作为其子项。

RaisedButton(
  color: Colors.redAccent,
  padding: EdgeInsets.all(8.0),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(4.0),
        child: Icon(
          Icons.camera,
          color: Colors.white,
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(2.0),
        child: Text(
          "Capture from Camera",
          style: TextStyle(
            color: Colors.yellow,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ],
  ),
  onPressed: () {
  },
);

如果您希望图标和文本并排放置，您可以替换Row为Column。