Как отображать кнопки рядом во Flutter: объяснение нескольких методов

Чтобы отображать кнопки рядом во Flutter, вы можете использовать несколько методов. Вот некоторые из наиболее распространенных подходов:

  1. Виджет «Строка». Виджет «Строка» позволяет располагать виджеты горизонтально. Вы можете разместить кнопки внутри виджета «Строка» и соответствующим образом настроить их свойства, такие как выравнивание, интервал и размер.
Row(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 1'),
    ),
    SizedBox(width: 10), // Adjust the spacing between buttons
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 2'),
    ),
  ],
)
  1. Виджет переноса: виджет переноса полезен, когда у вас есть несколько кнопок и вы хотите, чтобы они переносились на следующую строку, если недостаточно места по горизонтали. Он автоматически настраивает макет в зависимости от доступного места.
Wrap(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 2'),
    ),
  ],
)
  1. Виджет ButtonBar. Виджет ButtonBar специально разработан для отображения кнопок рядом с заранее заданными стилями и интервалами.
ButtonBar(
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 1'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 2'),
    ),
  ],
)
  1. Гибкость настройки: вы можете использовать комбинацию гибких и расширенных виджетов, чтобы добиться индивидуального размера и интервала для кнопок.
Row(
  children: [
    Flexible(
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Button 1'),
      ),
    ),
    SizedBox(width: 10), // Adjust the spacing between buttons
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Button 2'),
      ),
    ),
  ],
)