Flutter Grid: Создайте адаптивный UI с Row и Column

Система сеток в Flutter

Для вывода нескольких объектов на одной странице используется система сеток — набор рядов и столбцов, в ячейках которых размещаются различные объекты (текст, изображения, кнопки и т.д.). Это позволяет создавать разнообразные макеты и располагать элементы в любом порядке.

Реализация системы сеток с помощью Row и Column

В Flutter для реализации системы сеток используются классы Row (для создания горизонтальных рядов) и Column (для создания вертикальных столбцов).

Создание рядов с Row

Класс Row создаёт горизонтальный ряд. Свойство children принимает массив виджетов, которые будут отображаться в этом ряду. Пример:

Row(
  children: [
    Text('Hello'),
    ElevatedButton(onPressed: () {}, child: Text('Hello'))
  ],
),

Этот код выведет текстовую надпись и кнопку рядом друг с другом.

Создание столбцов с Column

Класс Column создаёт вертикальный столбец. Свойство children аналогично Row, принимая массив виджетов, которые будут расположены друг под другом.

Комбинирование Row и Column

Row и Column можно комбинировать для создания сложных макетов. Например, можно создать ряд, содержащий несколько столбцов, каждый из которых содержит свои виджеты.

Управление расположением элементов

Для управления расположением элементов внутри Row и Column используются свойства mainAxisAlignment и crossAxisAlignment.

• mainAxisAlignment: определяет выравнивание элементов вдоль главной оси (горизонтально для Row, вертикально для Column). Возможные значения: Start, End, Center, SpaceBetween, SpaceAround, SpaceEvenly.
• crossAxisAlignment: определяет выравнивание элементов вдоль поперечной оси (вертикально для Row, горизонтально для Column). Возможные значения аналогичны mainAxisAlignment.

Пример использования mainAxisAlignment:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('Элемент 1'),
    Text('Элемент 2'),
  ],
)

Этот код расположит элементы с равными промежутками между ними.

Пример создания приложения

Рассмотрим создание приложения с привлекательным дизайном, используя изученные концепции. Используем класс Scaffold для организации структуры приложения: AppBar для верхней панели, body для основной части и floatingActionButton для плавающей кнопки. Создадим профиль пользователя с именем, изображением и email.

Работа с состояниями

Для динамического изменения значений в приложении используются состояния. Для создания класса состояния используется StatefulWidget. Внутри класса состояния можно объявлять переменные, которые будут обновляться при изменении состояния. Метод setState используется для обновления UI после изменения состояния. Пример:

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  // ... остальной код
}

Здесь _counter — переменная состояния, а _incrementCounter — метод, увеличивающий её значение и обновляющий UI. В следующем уроке будет рассмотрен более подробный пример работы с состояниями при создании списка дел.

Изучение системы сеток и работы с состояниями — важные шаги в разработке приложений на Flutter. Знание основ CSS может упростить понимание этих концепций.