Container

Container представляет такой виджет, который также может содержать только один вложенный элемент, но при этом предоставляет дополнительные возможности по настройке фона, позиционирования и размера вложенных виджетов. По сути Container объединяет возможности других виджетов - Padding, Align, ConstrainedBox.

Конструктор контейнера принимает довольно много параметров, которые позвляют настроить отдельные аспекты отображения:

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})

Рассмотрим некоторые параметры:

• key: ключ элемента

• alignment: настройки выравнивания вложенного элемента в виде объекта AlignmentGeometry, аналогично настройке выравнивания в виджете Align

• padding: настройки отступа вложенного элемента от границ контейнера, аналогично настройке отступов в виджете Padding

• color: цвет контейнера

• constraints: ограничения длины и ширины в виде объекта BoxConstraints, применяемые к вложенному виджету. Аналогично установке размеров в ConstrainedBox

• margin: устанавливает отступы текущего виджета Container от границ внешнего контейнера, аналогично настройке параметра padding

• width: ширина контейнера

• heigt: высота контейнера

Создадим простейший виджет Container:

import 'package:flutter/material.dart';

void main() {
  runApp(Container(
      color: Colors.lightBlueAccent,
      alignment: Alignment.center,
      child: Text(
        'Hello Flutter from metanit.com',
          textDirection: TextDirection.ltr
        )
      )
  );
}

В данном случае в качестве цвета использован встроенный цвет (оттенок светло-синего цвета), описывамый значением Colors.lightBlueAccent. По выравниванию установлено центрирование вложенного виджета с помощью значения Alignment.center.

Отступы margin и padding

Теперь рассмотрим применение отступов как для margin, так и для padding:

import 'package:flutter/material.dart';

void main() {
  runApp(Container(
      color: Colors.lightBlue,
      alignment: Alignment.topLeft,
      padding: EdgeInsets.all(40),
      margin: EdgeInsets.only(top:30),
      child: Text(
        'Hello Flutter from metanit.com',
          textDirection: TextDirection.ltr
        )
      )
  );
}

В данном случае в качестве значения для margin установлен с верху отступ в 30 единиц. То есть виджет Container будет располагаться на 30 единиц ниже верхней границы экрана. Поэтому в верху экрана смартфона мы увидим черную полоску, которая не заполнена виджетом Container.

Также установлен отступ для вложенного виджета Text относительно границ Container в 40 единиц.