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

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

1. Scaffold — это основа для нашего интерфейса, как холст для художника.

2. AppBar — верхняя панель, где написано название приложения.

3. Container — виджет, который создает прямоугольную область с заданными размерами и цветом фона.

4. FittedBox — оборачивает дочерний виджет (в нашем случае — изображение) и изменяет его размер в зависимости от заданных параметров.

5. BoxFit.cover — указывает, как изображение должно адаптироваться, чтобы заполнить контейнер.

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

1. fit

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

   • Пример:

     fit: BoxFit.cover // Изображение заполнит весь контейнер, сохраняя пропорции

   • Применение: Позволяет контролировать, как содержимое будет масштабироваться и размещаться внутри FittedBox.

2. alignment

   • Описание: Указывает, как дочерний виджет должен выравниваться в доступном пространстве. Используются значения Alignment, например, Alignment.center, Alignment.topLeft, и другие.

   • Пример:

     alignment: Alignment.center // Элемент будет выровнен по центру контейнера

   • Применение: Полезно, когда нужно контролировать, как дочерний виджет будет размещен в рамках FittedBox.

3. clipBehavior

   • Описание: Указывает, как обрабатывать содержимое, которое выходит за пределы виджета. Может быть Clip.hardEdge, Clip.antiAlias, и другие.

   • Пример:

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

   • Применение: Позволяет контролировать, как виджет будет обрезать свое содержимое.

Итог

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