Документация
Widget классы
Container class - класс контейнер

Егор Долгов

16.04.2019 14:26:51 (обновлено 22.04.2019 19:59:56)

За все время: 9281 просмотр, 2520 посетителей.
За последние 30 дней: 73 просмотра, 46 посетителей.

Container class - класс контейнер

Наследование: Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

Виджет-класс Container сочетает в себе свойства: отображения, позиционирования и размерности.

Внутри контейнера можно задать поля padding по отношению к дочернему элементу child. Сам контейнер может иметь обводку с заданной толщиной. Вокруг контейнера могут быть отступы margin.

Вначале рисования, контейнер принимает геометрические изменения с помощью параметра transform, после происходит отрисовка фонового оформления decoration, на следующем этапе происходит рисование дочернего элемента child, и в завершении отрисовка поверхностного оформления foregroundDecoration.

Контейнер без дочернего элемента, и без ограничений по ширине и высоте, занимает все доступное пространство. С дочерним элементом принимает его размер. Но если есть выравнивание то размер родительского элемента.
Параметры width, height и constraints переопределяют размер контейнера.

Параметры класса Container

alignment → AlignmentGeometry
выравнивание дочернего элемента
final

child → Widget
дочерний элемент
final

color → Color
цвет фона контейнера (не использовать если задан параметр decoration)
final

constraints → BoxConstraints
дополнительные ограничения размера для дочернего элемента
final

decoration → Decoration
фоновое оформление контейнера
final

foregroundDecoration → Decoration
поверхностное оформление контейнера - рисуется поверх дочернего элемента
final

height → double
высота контейнера
final

margin → EdgeInsetsGeometry
отступы вокруг контейнера
final

padding → EdgeInsetsGeometry
поля внутри контейнера
final

transform → Matrix4
матричное преобразование геометрии контейнера
final

width → double
ширина контейнера
final

hashCode → int
read-only, inherited

key → Key
read-only, inherited

runtimeType → Type
read-only, inherited

Контейнер занимает доступное ему пространство

Container(color: Colors.brown)

Контейнер принимает размер дочернего элемента

Center(child: Container(color: Colors.red, child: Text('class Container')))

Ширина контейнера 100% по отношению к родительскому элементу, высота контейнера 200

Center(
  child: Container(
    width: double.infinity,
    height: 200,
    color: Colors.green,
    child: Text('class Container')
  )//Container
)//Center

Выравнивание дочернего элемента по центру контейнера

Center(
  child: Container(
    alignment: Alignment.center,
    width: double.infinity,
    height: 200,
    color: Colors.yellow,
    child: Text('class Container')
  )//Container
)//Center

Контейнер с максимальной шириной, отступами вокруг и внутри

Center(
  child: Container(
    padding: EdgeInsets.all(50),
    margin: EdgeInsets.symmetric(horizontal: 10),
    width: double.infinity,
    color: Colors.teal,
    child: Text('class Container',textAlign: TextAlign.center)
  )//Container
)//Center

Скругление и цвет контейнера с помощью параметра decoration

Center(
  child: Container(
    padding: EdgeInsets.all(25),
    child: Text('class Container'),
    decoration: BoxDecoration(
      color: Colors.pink,
      borderRadius: BorderRadius.circular(15)
    )//BoxDecoration
  )//Container
)//Center

Фоновое изображение контейнера

Center(
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      image: DecorationImage(image: Image.network('https://flutter.su/data/4e405c78a41d983fe87757c0c7e3885b.jpg').image, fit: BoxFit.cover),
      borderRadius: BorderRadius.circular(15)
    )//BoxDecoration
  )//Container
)//Center

Форма контейнера - круг, контейнер с тенью

Center(
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      image: DecorationImage(image: Image.network('https://flutter.su/data/4e405c78a41d983fe87757c0c7e3885b.jpg').image, fit: BoxFit.cover),
      shape: BoxShape.circle,
      boxShadow: [BoxShadow(
          color: Colors.black54,
          blurRadius: 5.0,
          spreadRadius: 5.0,
          offset: Offset(-5, 5),
      )] //boxShadow
    )//BoxDecoration
  )//Container
)//Center

Подборка заметок