Методы размещения сеток во Flutter с примерами кода

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

  1. Виджет GridView:
    Виджет GridView — это универсальный вариант создания сеток. Он позволяет вам определить количество столбцов, расстояние между поперечными и главными осями. Вот пример:
GridView.count(
  crossAxisCount: 2,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
    Container(color: Colors.yellow),
  ],
)
  1. GridView.builder():
    Конструктор GridView.builder()полезен, когда у вас большое количество элементов или когда элементы необходимо генерировать динамически. Он использует функцию компоновщика для ленивой генерации элементов по мере того, как они становятся видимыми на экране. Вот пример:
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  itemCount: 10, // Replace with your actual item count
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.purple,
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
)
  1. Виджет переноса:
    Виджет Wrapможно использовать, если вы хотите, чтобы элементы переносились на следующую строку, когда недостаточно горизонтального пространства. Он подходит для создания сеток с элементами разного размера. Вот пример:
Wrap(
  spacing: 10,
  runSpacing: 10,
  children: <Widget>[
    Container(width: 100, height: 100, color: Colors.red),
    Container(width: 150, height: 150, color: Colors.green),
    Container(width: 120, height: 120, color: Colors.blue),
    Container(width: 80, height: 80, color: Colors.yellow),
  ],
)

Это всего лишь несколько примеров того, как можно расположить сетку во Flutter. Вы можете изучить дополнительные параметры и настройки, обратившись к документации Flutter.