Кнопка со значком Flutter с текстом ниже: различные методы реализации

Вот несколько способов создать кнопку со значком Flutter с текстом под ней:

Метод 1: использование виджетов «Столбец» и «Значок»

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.add),
    SizedBox(height: 5),
    Text('Add'),
  ],
)

Метод 2. Использование виджетов Column и IconButton

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    IconButton(
      icon: Icon(Icons.add),
      onPressed: () {
        // Add button action
      },
    ),
    SizedBox(height: 5),
    Text('Add'),
  ],
)

Метод 3. Использование виджетов «Стек» и «Выравнивание»

Stack(
  alignment: Alignment.center,
  children: [
    Icon(Icons.add),
    Positioned(
      top: 30,
      child: Text('Add'),
    ),
  ],
)

Метод 4. Использование виджетов «Стек», «Центр» и «Столбец»

Stack(
  children: [
    Center(child: Icon(Icons.add)),
    Positioned(
      bottom: 0,
      child: Column(
        children: [
          SizedBox(height: 5),
          Text('Add'),
        ],
      ),
    ),
  ],
)