# FittedBox

#### Что такое `FittedBox`

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

#### Пример использования

В этом примере мы создадим изображение, которое будет адаптироваться к размеру контейнера с помощью `FittedBox`.

<div align="left"><figure><img src="https://i.postimg.cc/Gt9Rr5Qn/fitted-box.png" alt="" width="188"><figcaption></figcaption></figure></div>

```dart
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')
          ),
        ),
      ),
    );
  }
}
  
```

#### Как работает код

1. **Scaffold** — это основа для нашего интерфейса, как холст для художника.
2. **AppBar** — верхняя панель, где написано название приложения.
3. **Container** — виджет, который создает прямоугольную область с заданными размерами и цветом фона.
4. **FittedBox** — оборачивает дочерний виджет (в нашем случае — изображение) и изменяет его размер в зависимости от заданных параметров.
5. **BoxFit.cover** — указывает, как изображение должно адаптироваться, чтобы заполнить контейнер.

#### Все настройки FittedBox

1. **fit**
   * **Описание**: Указывает, как дочерний виджет должен вписываться в доступное пространство. Существуют различные значения, такие как `BoxFit.fill`, `BoxFit.contain`, `BoxFit.cover`, и другие.
   *   **Пример**:

       ```dart
       fit: BoxFit.cover // Изображение заполнит весь контейнер, сохраняя пропорции
       ```
   * **Применение**: Позволяет контролировать, как содержимое будет масштабироваться и размещаться внутри `FittedBox`.
2. **alignment**
   * **Описание**: Указывает, как дочерний виджет должен выравниваться в доступном пространстве. Используются значения `Alignment`, например, `Alignment.center`, `Alignment.topLeft`, и другие.
   *   **Пример**:

       ```dart
       alignment: Alignment.center // Элемент будет выровнен по центру контейнера
       ```
   * **Применение**: Полезно, когда нужно контролировать, как дочерний виджет будет размещен в рамках `FittedBox`.
3. **clipBehavior**
   * **Описание**: Указывает, как обрабатывать содержимое, которое выходит за пределы виджета. Может быть `Clip.hardEdge`, `Clip.antiAlias`, и другие.
   *   **Пример**:

       ```dart
       clipBehavior: Clip.hardEdge // Содержимое, выходящее за пределы, будет обрезано
       ```
   * **Применение**: Позволяет контролировать, как виджет будет обрезать свое содержимое.

#### Итог

`FittedBox` — это полезный инструмент для адаптации содержимого к доступному пространству. Если вы хотите, чтобы ваш виджет или изображение хорошо вписывались в заданные размеры, не теряя своих пропорций, используйте `FittedBox`. Это особенно актуально для работы с изображениями и графикой в приложениях Flutter.
