🧩FittedBox
Что такое FittedBox
FittedBox
FittedBox
— это виджет в Flutter, который позволяет изменять размер своего дочернего виджета, чтобы он вписывался в доступное пространство. Подумайте о FittedBox
как о рамке для картины: он может увеличивать или уменьшать картину, чтобы она хорошо смотрелась в рамке, сохраняя пропорции и не искажая изображение.
Пример использования
В этом примере мы создадим изображение, которое будет адаптироваться к размеру контейнера с помощью FittedBox
.

import 'package:flutter/material.dart';
class FittedBoxExample extends StatelessWidget {
const FittedBoxExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('FittedBox Example')),
body: Center(
child: Container(
width: 200, // Ширина контейнера
height: 200, // Высота контейнера
color: Colors.grey[200], // Цвет фона
child: const FittedBox(
fit: BoxFit.cover, // Как изображение будет адаптироваться
child: Text('Hello')
),
),
),
);
}
}
Как работает код
Scaffold — это основа для нашего интерфейса, как холст для художника.
AppBar — верхняя панель, где написано название приложения.
Container — виджет, который создает прямоугольную область с заданными размерами и цветом фона.
FittedBox — оборачивает дочерний виджет (в нашем случае — изображение) и изменяет его размер в зависимости от заданных параметров.
BoxFit.cover — указывает, как изображение должно адаптироваться, чтобы заполнить контейнер.
Все настройки FittedBox
fit
Описание: Указывает, как дочерний виджет должен вписываться в доступное пространство. Существуют различные значения, такие как
BoxFit.fill
,BoxFit.contain
,BoxFit.cover
, и другие.Пример:
fit: BoxFit.cover // Изображение заполнит весь контейнер, сохраняя пропорции
Применение: Позволяет контролировать, как содержимое будет масштабироваться и размещаться внутри
FittedBox
.
alignment
Описание: Указывает, как дочерний виджет должен выравниваться в доступном пространстве. Используются значения
Alignment
, например,Alignment.center
,Alignment.topLeft
, и другие.Пример:
alignment: Alignment.center // Элемент будет выровнен по центру контейнера
Применение: Полезно, когда нужно контролировать, как дочерний виджет будет размещен в рамках
FittedBox
.
clipBehavior
Описание: Указывает, как обрабатывать содержимое, которое выходит за пределы виджета. Может быть
Clip.hardEdge
,Clip.antiAlias
, и другие.Пример:
clipBehavior: Clip.hardEdge // Содержимое, выходящее за пределы, будет обрезано
Применение: Позволяет контролировать, как виджет будет обрезать свое содержимое.
Итог
FittedBox
— это полезный инструмент для адаптации содержимого к доступному пространству. Если вы хотите, чтобы ваш виджет или изображение хорошо вписывались в заданные размеры, не теряя своих пропорций, используйте FittedBox
. Это особенно актуально для работы с изображениями и графикой в приложениях Flutter.
Last updated