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

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

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

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

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

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

• Контейнер занимает доступное ему пространство
• Контейнер принимает размер дочернего элемента
• Ширина контейнера 100% по отношению к родительскому элементу, высота контейнера 200
• Выравнивание дочернего элемента по центру контейнера
• Контейнер с максимальной шириной, отступами вокруг и внутри
• Скругление и цвет контейнера с помощью параметра decoration
• Фоновое изображение контейнера
• Форма контейнера - круг, контейнер с тенью

Параметры класса 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