🧩Container()

В Flutter, Container — это один из самых часто используемых виджетов, который служит для размещения и оформления других виджетов. Он предоставляет множество настроек (параметров), с помощью которых можно изменять внешний вид и поведение контейнера. Рассмотрим несколько примеров использования основных настроек Container.

1. Параметр color

Параметр color задает цвет фона для контейнера.

// Some code
Container(
  color: Colors.blue,
  child: Text('Привет, мир!'),
)

Здесь контейнер будет окрашен в синий цвет.

2. Параметр width и height

Эти параметры задают ширину и высоту контейнера.

// Some code
Container(
  width: 200,
  height: 100,
  color: Colors.green,
  child: Text('Ширина: 200, Высота: 100'),
)

Контейнер будет иметь ширину 200 пикселей и высоту 100 пикселей.

3. Параметр margin

Этот параметр задает внешние отступы (вне контейнера).

// Some code
Container(
          height: 100,
          width: 300,
          margin: EdgeInsets.all(20), // Отступы 20 пикселей со всех сторон
          color: Colors.red,
        
          child: Text('Внешние отступы 20'),
        ),

Контейнер будет окружен отступами 20 пикселей со всех сторон.

4. Параметр padding

padding задает внутренние отступы (между содержимым и границей контейнера).

// Some code
Container(
  padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10), 
  color: Colors.orange,
  child: Text('Внутренние отступы'),
)

В данном примере у контейнера будут внутренние отступы по горизонтали 30 пикселей и по вертикали 10 пикселей.

5. Параметр alignment

Этот параметр управляет расположением дочернего виджета внутри контейнера.

// Some code
Container(
  width: 300,
  height: 200,
  alignment: Alignment.bottomRight, 
  color: Colors.purple,
  child: Text('Внизу справа'),
)

Текст будет размещен в правом нижнем углу контейнера.

6. Параметр decoration

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

// Some code
Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    color: Colors.yellow,
    borderRadius: BorderRadius.circular(20), // Закругленные углы
    boxShadow: [ 
      BoxShadow(
        color: Colors.grey,
        blurRadius: 10, // Тень
        offset: Offset(5, 5),
      ),
    ],
  ),
  child: Text('Закругленные углы и тень'),
)

Здесь у контейнера будут закругленные углы и тень.

7. Параметр transform

Этот параметр позволяет применять трансформации, такие как масштабирование или поворот.

// Some code
Container(
  width: 100,
  height: 100,
  color: Colors.cyan,
  transform: Matrix4.rotationZ(0.1), // Поворот
  child: Text('Повернутый контейнер'),
)

Контейнер будет слегка повернут.

8. Параметр constraints

constraints позволяет задавать ограничения на минимальные и максимальные размеры контейнера.

// Some code
Container(
  constraints: BoxConstraints(
    minWidth: 150,
    maxWidth: 300,
    minHeight: 100,
    maxHeight: 200,
  ),
  color: Colors.lime,
  child: Text('Ограниченные размеры'),
)

Контейнер не может быть меньше 150x100 и больше 300x200 пикселей.

9. Параметр clipBehavior

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

// Some code
Container(
  width: 100,
  height: 100,
  clipBehavior: Clip.hardEdge, // Обрезка
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10), // Закругленные углы
  ),
  child: OverflowBox(
    maxWidth: 200,
    maxHeight: 200,
    child: Container(color: Colors.orange, width: 150, height: 150),
  ),
)

Содержимое, которое выходит за пределы контейнера, будет обрезано.

10. Параметр child

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

// Some code
Container(
  color: Colors.teal,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('Это текст'),
      Icon(Icons.star, color: Colors.white),
    ],
  ),
)

PreviousScaffoldNextAppBar()

Last updated