Контейнер

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

Контейнеры можно использовать для создания структуры пользовательского интерфейса. Контейнеры могут быть полезны для разделения экрана на более мелкие логические части.

Вот пример того, как вы можете использовать виджет Container в своем проекте:

1. Сначала перетащите виджет контейнера с вкладки Layout Elements (в панели виджетов) или добавьте его непосредственно с вкладки Widget Tree.
2. Теперь перейдите в Редактор свойств и перейдите к параметрам Ширина и Высота. (Под свойствами контейнера) Установите ширину виджета inf и высоту 200.
3. Чуть ниже раздела Ширина и высота находится раздел Цвет заливки. Щелкните по тексту Unset, введите код цвета или выберите его из палитры или кнопки Simple, а затем выберите Use Selected Color.
4. Теперь добавьте виджет Column внутрь контейнера. Установите его выравнивание по оси Main Axis Alignment на Start.
5. Добавьте изображение CircleImage и виджет Text внутри Column из раздела Base Element.
6. Чтобы придать стиль виджету Text, выберите его и переместите редактор свойств. В разделе Свойства текста установите Стиль текста темы — Заголовок 1, а Цвет текста — Третичный.

Вы можете настроить внешний вид этого виджета с помощью различных свойств, доступных на панели свойств.

Посмотрите, как добавить подкладку.

Узнайте, как настроить выравнивание.

Контейнерам можно задать форму прямоугольника или круга. Чтобы изменить форму контейнера, выберите виджет Container, перейдите на панель свойств и выберите опцию Rectangular Shape или Circular Shape (в разделе Container Properties).

Чтобы добавить цвет фона к контейнеру:

1. Выберите контейнер в дереве виджетов или в области холста.
2. Перейдите в редактор свойств и перейдите к параметру Цвет заливки.
3. Введите код цвета или выберите его из палитры или кнопки Simple, а затем выберите Use Selected Color.

Чтобы добавить градиентный цвет в контейнер:

1. Прокрутите вниз до раздела Градиент.
2. Дважды нажмите на кнопку Добавить цвет. Нажмите еще, чтобы получить больше цветов.
3. Введите/измените код цвета для добавленных цветов.
4. Введите значение в точке перехода, чтобы настроить распределение каждого цвета в линейном градиенте. Точка перехода может принимать значение только от 0,0 до 1,0. Если вы добавляете три цвета, вы можете установить Точку перехода как 0.0, 0.5 и 1.0 для каждого цвета соответственно.
5. Введите Угол в градусах, чтобы изменить направление цвета градиента.

Чтобы изменить размер контейнера:

1. В редакторе свойств перейдите к параметрам Ширина и Высота. (Под свойствами контейнера).
2. Существует три способа задать размеры контейнера:
   1. Чтобы задать точный размер, выберите PX и введите нужные значения.
   2. Чтобы задать размеры в % от размера экрана, выберите % и введите нужное значение.
   3. Чтобы сделать высоту или ширину контейнера равной высоте или ширине экрана, нажмите на значок бесконечности ().

Иногда вы не задаете высоту и ширину контейнера в явном виде и позволяете ему иметь размер дочернего виджета. В этом случае вы можете обнаружить, что макет несовместим на разных размерах экрана и устройствах. Чтобы решить эту проблему, можно ограничить размер контейнера до максимальной ширины и высоты.

Чтобы ограничить размер контейнера, выберите виджет Container, перейдите на панель свойств и введите значения в свойствах Max W и Max H.

Чтобы добавить границу к контейнеру:

1. В редакторе свойств выберите Цвет границы, Радиус границы и Ширина границы в свойствах контейнера.
2. Здесь приведены дальнейшие инструкции по добавлению границы.

Вы можете обрезать содержимое (т.е. дочерний виджет) контейнера в округлой прямоугольной форме. Аналогичного эффекта можно добиться, просто добавив радиус границы (Border Radius), но преимущество в том, что это повышает производительность приложения, поскольку не происходит рендеринга или отрисовки пикселей, находящихся за пределами прямоугольника.

Чтобы зажать содержимое, выберите виджет Container, перейдите на панель свойств, включите переключатель Clip Content и добавьте Border Radius.

Чтобы изменить высоту (глубину или ось Z) контейнера:

1. В редакторе свойств перейдите к текстовому вводу Elevation в свойствах контейнера.
2. Введите значение, чтобы увидеть эффект падающей тени под контейнером. Чем больше значение, тем больше будет размер тени.

Чтобы добавить тень к контейнеру:

1. В редакторе свойств перейдите в раздел Тень контейнера.
2. Введите код Shadow Color или выберите его из палитры или кнопки Simple.
3. Чтобы задать размер тени, введите значение в Spread Radius.
4. Примените Радиус размытия, чтобы размыть границу тени.
5. Введите значение для Offset X, чтобы переместить тень по горизонтальной оси. При вводе положительного значения тень будет перемещаться в правом направлении, а отрицательного — в левом.
6. Введите значение для параметра Смещение Y, чтобы переместить тень по вертикальной оси. При вводе положительного значения тень будет перемещаться в направлении вниз, а отрицательного — в направлении вверх.

Чтобы установить фоновое изображение для контейнера:

1. В редакторе свойств прокрутите вниз до раздела Фоновое изображение.
2. Выберите тип изображения: Сеть или Актив.
   1. Если вы выбрали Сеть, введите URL-адрес изображения в поле Путь.
   2. Если вы выбрали Asset, нажмите на кнопку Upload Image +, чтобы загрузить изображение с вашего компьютера.
3. Настройте изображение, которое выглядит лучше всего, из выпадающих значений Box fit.

Чтобы выровнять дочерний элемент внутри контейнера:

1. В редакторе свойств прокрутите вниз до раздела Дочерний (последний).
2. Отрегулируйте выравнивание с помощью ползунка или введите значение.

Посмотрите, как установить цвет из переменной в любое свойство цвета этого виджета.

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

Вот пример того, как это выглядит при обновлении свойств контейнера с неявной анимацией и без нее.

Чтобы добавить неявную анимацию:

1. Перейдите на панель свойств и включите тумблер Implicit Animated.
2. Установите для кривой анимации желаемое значение из следующих вариантов: Ease In, Ease Out, Ease In Out, Bounce, Elastic и Linear. Это определяет, как должна вести себя анимация в течение определенного времени. Вы можете попробовать каждый из них, чтобы понять, какой подходит лучше.
3. Значение Duration указывает время, в течение которого будет работать анимация. Обратите внимание, что это значение должно быть в миллисекундах (например, 1000 мс = 1 секунда).
4. Теперь при каждом обновлении свойств контейнера, таких как ширина, высота, цвет заливки и цвет границы, контейнер будет автоматически анимироваться под новое значение.

Инструкции по отображению/скрытию виджета можно найти здесь.

Чтобы выполнить какое-либо действие по щелчку на контейнере, добавьте действие в FlutterFlow. Инструкции по добавлению действия вы можете найти здесь.