кнопка со значком флаттера с описанием текста под ним

Question

я новенький во флаттере, и мне нужно использовать кнопку с изображением текста под ним. Примечание: кнопка и текстовое описание должны находиться под одной карточкой,

Т.е. под кнопкой должно быть текстовое описание "эфирное время".

Вот мой код:

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

Вы можете использовать RaisedButton и иметь строку / столбец с иконкой и текстом в качестве дочернего элемента.

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, если хотите, чтобы значок и текст располагались рядом.

Answer 2

Используйте Column для отображения виджетов в вертикальном порядке:

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