Контейнеры и управление компоновкой

Чтобы организовать и расположить определенным образом один виджет или наборы виджетов применяются специальные виджеты - контейнеры компоновки (layout widgets), которые управляют компоновкой виджетов (в том числе и других контейнеров). Во Flutter эта группа виджетов очень широко представлена. Рассмотрим некоторые из них.

Align

Виджет Align позволяет позиционировать вложенный элемент относительно определенной стороны контейнера. По умолчанию он растягивается по всей ширине и высоте контейнера, заполняя все его пространство.

Для создания виджета применяется следующий конструктор:

Align({Key key, AlignmentGeometry alignment: Alignment.center, double widthFactor, double heightFactor, Widget child})

Как видно из сигнатуры конструктора все его параметры необязательные. Для установки вложенного элемента, к которому будет применяться выравнивание по определенному краю контейнера, используется параметр child - в его качестве может выступать любой объект Widget, то есть любой виджет.

Дополнительные параметры widthFactor и heightFactor коэффициент изменения ширины и высоты виджета Center относительно вложенного дочернего элемента. Например, если widthFactor равен 2.0, то ширина виджета Center будет равна ширине дочернего элемента, умноженной на 2.0. То же самое касается и heightFactor, только он изменяет высоту.

Для установки выравнивания применяется параметр alignment, который представляет класс AlignmentGeometry и может принимать следующие значения:

• Alignment.bottomCenter: выравнивание по горизонтали по центру, по вертикали - у нижнего края контейнера (внизу по центру). Аналогично значению Alignment(0.0, 1.0)

• Alignment.bottomLeft: выравнивание по горизонтали по левому краю, по вертикали - у нижнего края контейнера (внизу слева). Аналогично значению Alignment(-1.0, 1.0)

• Alignment.bottomRight : выравнивание по горизонтали по правому краю, по вертикали - у нижнего края контейнера (внизу справа). Аналогично значению Alignment(1.0, 1.0)

• Alignment.center: выравнивание по горизонтали и по вертикали по центру. Аналогично значению Alignment(0.0, 0.0)

• Alignment.centerLeft: выравнивание по горизонтали по левому краю, по вертикали - по центру контейнера. Аналогично значению Alignment(-1.0, 0.0)

• Alignment.centerRight: выравнивание по горизонтали по правому краю, по вертикали - по центру контейнера. Аналогично значению Alignment(1.0, 0.0)

• Alignment.topCenter: выравнивание по горизонтали по центру, по вертикали - у верхнего края контейнера (вверху по центру). Аналогично значению Alignment(0.0, -1.0)

• Alignment.topLeft: выравнивание по горизонтали по левому краю, по вертикали - у верхнего края контейнера (вверху слева). Аналогично значению Alignment(-1.0, -1.0)

• Alignment.topRight: выравнивание по горизонтали по правому краю, по вертикали - у верхнего края контейнера (вверху справа). Аналогично значению Alignment(1.0, -1.0)

Несмотря на то, что в конструкторе параметр alignment представляет класс AlignmentGeometry, здесь же константы представляют класс Alignment, который унаследован от AlignmentGeometry.

Используем виджет Align для размещения текста, к примеру, слева по центру:

import 'package:flutter/material.dart';

void main() {
  runApp(Align(
    alignment: Alignment.centerLeft,
      child:Text(
      'Текст слева по центру!',
      textDirection: TextDirection.ltr,   // текст слева направо
	  style: TextStyle(fontSize: 24) // высота шрифта 24
    )
  )
  );
}

FractionalOffset

Класс FractionalOffset унаследован от класса Alignment и предоставляет дополнительные возможности для позиционирования элемента. Он имеет следующий конструктор:

FractionalOffset(double dx, double dy)

где dx - это смещение по горизонтали, а dy - смещение по вертикали. Смещения выражаются в долях от 0.0 до 1.0, например, FractionalOffset(1.0, 0.0) представляет верхний правый угол контейнера, а FractionalOffset(0.0, 1.0) - нижний левый угол. Соответственно FractionalOffset(0.5, 0.5) - это центр (как по горизонтали, так и по вертикали). Указав нужное смещение, мы можем расположить элемент в определенной части контейнера. Например:

import 'package:flutter/material.dart';

void main() {
  runApp(Align(
	  alignment: FractionalOffset(0.2, 0.3),
      child:Text(
      'Hello Flutter',
      textDirection: TextDirection.ltr,   // текст слева направо
        style: TextStyle(fontSize: 20) // высота шрифта 20
    )
   )
  );
}

Значение FractionalOffset(0.2, 0.3) указывает, что верхний угол вложенного элемента Text будет находиться по следующим координатам: X = ширина_контейнера_Align * 0.2, Y = высота_контейнера_Align * 0.3.