ConstrainedBox

Виджет ConstrainedBox задает параметры прямоугольной области (ширину и высоту), в которой размещается вложенный виджет. Для создания объекта ConstrainedBox применяется следующий конструктор:

ConstrainedBox({Key key, @required BoxConstraints constraints, Widget child})

Обязательный параметр constraints представляет класс BoxConstraints, который имеет следующие конструкторы:

• BoxConstraints({double minWidth: 0.0, double maxWidth: double.infinity, double minHeight: 0.0, double maxHeight: double.infinity}): получает минимальную ширину (minWidth), максимальную ширину (maxWidth), минимальную (minHeight) и максимальную (maxHeight) длину

• BoxConstraints.expand({double width, double height}): принимает ширину и длину, до которых может растягиваться контейнер

• BoxConstraints.loose(Size size): создает контейнер, который должен иметь размер не больше, чем параметр size

• BoxConstraints.tight(Size size): создает контейнер, который должен иметь в точности тот же размер, что и параметр size

• BoxConstraints.tightFor({double width, double height}): принимает точные значения ширины и длины, которые должен иметь контейнер

• BoxConstraints.tightForFinite({double width: double.infinity, double height: double.infinity}): принимает точные значения ширины и длины, если они не равны double.infinity

Данный тип контейнеров применяется, когда нам надо ограничить виджет определенной областью.

Например, виджет Text по умолчанию растягивается по всей длине и ширине контейнера:

import 'package:flutter/material.dart';

void main() {
  runApp(Center(
      child: Text(
		'Hello Flutter from metanit.com',
		textDirection: TextDirection.ltr,
		textAlign: TextAlign.center,	// текст по центру
		style: TextStyle(fontSize: 26) // высота шрифта 26
	  )
	)
  );
}

Используем ConstrainedBox, чтобы ограничить область текста на экране:

import 'package:flutter/material.dart';

void main() {
  runApp(Center(
      child: ConstrainedBox(
          constraints: BoxConstraints.tightFor(width: 300, height: 100),
          child: Text(
            'Hello Flutter from metanit.com',
            textDirection: TextDirection.ltr,
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 26) // высота шрифта 26
        )
      )
    )
  );
}

В данном случае с помощью конструктора BoxConstraints.tightFor(width: 300, height: 100) область ConstrainedBox и соответственно его содержимого ограничивается прямоугольником шириной 300 и высотой в 100 единиц.

Если содержимое виджета занимает больше места, то оно усекается до видимой области. Например, попробуем вывести многострочный текст:

import 'package:flutter/material.dart';

void main() {
  runApp(Center(
      child: ConstrainedBox(
          constraints: BoxConstraints.tightFor(width: 320, height: 80),
          child: Text(
              'Мы все учились понемногу\nЧему-нибудь и как-нибудь,\nТак воспитаньем, слава богу,\nУ нас немудрено блеснуть.',
              textDirection: TextDirection.ltr,
              style: TextStyle(fontSize: 22) // высота шрифта 22
        )
      )
    )
  );
}

В данном случае последняя строка не впишеется в отведенную для виджета область, поэтому мы ее не увидим: