Когда мы говорим о задании размеров во Flutter, есть несколько вариантов, которые могут быть использованы в зависимости от требований вашего интерфейса. Рассмотрим каждый из них подробнее.
1. Фиксированный размер:
Если вам нужно задать фиксированную ширину или высоту виджета, вы можете использовать виджет Container с указанием значения width или height. Пример:
Container(
width: 200.0,
height: 100.0,
child: Text('Фиксированный размер'),
)
В этом примере контейнер будет иметь ширину 200 пикселей и высоту 100 пикселей.
2. Относительные размеры:
Для создания относительного размера можно использовать виджеты Flexible или Expanded. Эти виджеты расширяют или сжимают свои дочерние виджеты, чтобы заполнить доступное пространство. Пример:
Row(
children: <Widget>[
Flexible(
flex: 1,
child: Container(
color: Colors.blue,
child: SizedBox.expand(),
),
),
Flexible(
flex: 2,
child: Container(
color: Colors.red,
child: SizedBox.expand(),
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.green,
child: SizedBox.expand(),
),
),
],
)
В этом примере каждый контейнер внутри строки будет занимать определенное относительное пространство: первый контейнер будет занимать 1/4 доступного пространства, второй - 2/4 (половину), а третий - 1/4 пространства.
3. Адаптивный размер:
Если вам нужно, чтобы размеры виджета автоматически адаптировались под содержимое, вы можете использовать виджеты AutoSizeText или FittedBox. Виджет AutoSizeText автоматически изменяет размер текста, чтобы он подходил по ширине в заданный контейнер. Пример:
Container(
width: 200.0,
height: 100.0,
child: AutoSizeText(
'Текст с адаптивным размером',
style: TextStyle(fontSize: 20.0),
maxLines: 1,
textAlign: TextAlign.center,
),
)
В этом примере текст будет автоматически изменять размер, чтобы подходить по ширине контейнера.
Виджет FittedBox помещает дочерний виджет внутри себя и масштабирует его так, чтобы он соответствовал доступному пространству, сохраняя свое соотношение сторон. Пример:
Container(
width: 200.0,
height: 100.0,
child: FittedBox(
fit: BoxFit.contain,
child: Image.asset('images/example.png'),
),
)
В этом примере изображение будет автоматически масштабироваться, чтобы подходить по ширине и высоте контейнера, сохраняя при этом свое соотношение сторон.
Таким образом, в Flutter есть несколько способов задания размеров виджетов, и выбор зависит от ваших потребностей и требований вашего интерфейса.