Руководство Flutter Container
View more Tutorials:
В Flutter, Container - это контейнер, используемая для размещения дочернего widget. В то же время вы можете задать его стиль с помощью свойств, таких как padding, margin, alignment и т. д. Container выделяет содержимое или отделяет его от другого содержимого.

Container Constructor:
Container Constructor
Container( {Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child, Clip clipBehavior: Clip.none} )
Существует множество параметров, участвующих в создании Container, таких как width, height, child, alignment и т. д. Кроме того, на него влияют ограничения родительского widget, поэтому поведение макета Container является относительно сложным. Теперь давайте рассмотрим различные примеры в различных случаях:
Case 1:
Если заданы параметрыwidth, height и родительский widget ограничен (bounded), Container определит свой размер в соответствии с предоставленными параметрами.
Например, если указанный Container (width, height)=(200,200) является дочерним элементом Center, то он будет иметь размер 200x200.
Center ( child: Container ( color: Colors.greenAccent[100], padding: EdgeInsets.fromLTRB(10, 5, 50, 5), width: 200, height: 200 ) )

Case 2:
Если параметры child, width, height, constraints не заданы (или null), а родительский widget неограничен (unbounded), Container попытается определить его размер как можно меньше.
Рассмотрим пример: Container с незаданными параметрами width, height, child, constraints, а является дочерним элементом Row, он попытается определить свой горизонтальный размер как можно меньше.
Примечание: Row представляет собой вертикально ограниченный (bounded) widget, но неограниченный (unbounded) по горизонтали.
Row ( children: [ Container ( color: Colors.greenAccent[100], padding: EdgeInsets.fromLTRB(50, 30, 50, 30), margin: EdgeInsets.fromLTRB(30, 55, 50, 70), ) ] )

Case 3:
Если параметры child, width, height, constraintsне заданы (или null), а родительский widget ограничен (bounded), Container попытается установить его размер как можно больше.
Например: Container с незадаными параметрами child, width, height, constraints, а является дочерним элементом Center, размер Container будет максимально большим.
Center ( child: Container ( color: Colors.greenAccent[100], padding: EdgeInsets.fromLTRB(50, 30, 50, 30), margin: EdgeInsets.fromLTRB(30, 55, 50, 70) ) )

Case 4:
Если child указан, но параметры width, height, constraints и alignment отсутствуют, Container будет как можно меньше и будет соответствовать ограничениям родительского widget.
Например:
Center ( child: Container ( color: Colors.greenAccent[100], padding: EdgeInsets.fromLTRB(50, 30, 50, 30), margin: EdgeInsets.fromLTRB(30, 55, 50, 70), child: ElevatedButton ( child: Text("Button"), onPressed: () {}, ) ) )

Например:
ConstrainedBox ( constraints: BoxConstraints ( maxWidth: 300, maxHeight: 200 ), child: Container ( color: Colors.greenAccent[100], padding: EdgeInsets.fromLTRB(50, 30, 50, 30), margin: EdgeInsets.fromLTRB(30, 55, 50, 70), child: ElevatedButton ( child: Text("Button"), onPressed: () {}, ) ) )

Case 5:
Если child и alignment заданы, но параметры width, height, constraints отсутствуют, Container будет максимально большим.
См. дополнительные примеры в разделе alignment (ниже).
Свойство alignment используется для выравнивания (align) положения child в Container.
AlignmentGeometry alignment
Если Container, для которого указан child и не указаны width, height, constraints и alignment, он установит свой размер как можно меньше. Однако если Container, для которого указаны child и alignment , но не указаны width, height, constraints, он будет определять свой размер как можно больше.
Container ( alignment: Alignment.bottomRight, color: Colors.greenAccent[100], padding: EdgeInsets.fromLTRB(50, 30, 50, 30), margin: EdgeInsets.fromLTRB(30, 55, 50, 70), child: ElevatedButton ( child: Text("Button"), onPressed: () {}, ) )

- TODO Link!
Свойство padding используется для создания пустого пространства в Container и окружения child (если таковой имеется).
EdgeInsetsGeometry padding
Свойство color используется для установки цвета фона Container и позади (behind) child.
Color color
Свойство decoration используется для рисования чего-либо на фоне Container и позади (behind) child. Если вы хотите нарисовать цвет на фоне Container (а также за child), лучше всего использовать свойство color.
Decoration decoration
Container ( alignment: Alignment.center, decoration: BoxDecoration( color: const Color(0xff7c94b6), image: const DecorationImage( image: NetworkImage('https://s3.o7planning.com/images/tom-and-jerry.png'), fit: BoxFit.cover, ), border: Border.all( color: Colors.black, width: 8), borderRadius: BorderRadius.circular(12), ), margin: EdgeInsets.all(30), child: ElevatedButton( child: Text("I am a Long Button"), onPressed: () {} ) )

- TODO Link!
Свойство foregroundDecoration используется для рисования чего - либо на фоне Container и перед (front) child. Он может закрывать и делать child невидимым, но вы все равно можете взаимодействовать с child.
Decoration foregroundDecoration
Например:

Container ( alignment: Alignment.center, foregroundDecoration: BoxDecoration( image: const DecorationImage( image: NetworkImage('https://s3.o7planning.com/images/smile-64.png'), fit: BoxFit.none, ), border: Border.all( color: Colors.black, width: 8), borderRadius: BorderRadius.circular(12), ), margin: EdgeInsets.all(30), child: ElevatedButton( child: Text("I am a Long Button"), onPressed: () {} ) )
double width
double height
Свойство constraints используется для добавления дополнительных ограничений для Container.
BoxConstraints constraints
Например:
Container ( color: Colors.greenAccent[100], padding: EdgeInsets.all(30), width: 200, height: 200, constraints: BoxConstraints( maxHeight: 80 ), child:ElevatedButton( child: Text("Button"), onPressed: (){}, ) )

- TODO Link!
Свойство margin спользуется для создания пустого пространства вокруг Container.
EdgeInsetsGeometry margin
Matrix4 transform
Widget child
Clip clipBehavior: Clip.none
- TODO Link!