В повседневной разработке часто встречаются задачи, которые можно решить красиво и без лишнего кода. Вместо того чтобы городить велосипеды, достаточно знать несколько встроенных инструментов
Flutter. Сегодня разберем четыре полезных виджета.
LayoutBuilder - адаптивный интерфейс без хардкода:
Проблема: нужно показывать разную верстку в зависимости от ширины экрана. Многие начинают писать проверки через
MediaQuery или пытаются угадать размеры устройства. Но это неправильно - важно не само устройство, а реальное место, которое виджет занимает на экране.
LayoutBuilder дает доступ к ограничениям родителя прямо во время построения. Вы можете посмотреть максимальную ширину и решить, показывать горизонтальное меню или вертикальное, две колонки или одну. Все адаптируется под текущий контейнер, а не под экран в целом.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return Row(children: [sidebar, content]);
}
return Column(children: [sidebar, content]);
},
)
AnimatedSwitcher - плавные переходы между виджетами:
Смена одного виджета на другой обычно выглядит резко. Текст изменился - моргнул, иконка сменилась - тоже моргнула.
AnimatedSwitcher добавляет анимацию при замене дочернего элемента. Старый виджет плавно исчезает, новый - появляется. Вы можете настроить тип перехода: затухание, сдвиг, масштаб.
Важный момент: анимация сработает только если у виджетов разные
key. Иначе
AnimatedSwitcher решит, что ничего не изменилось.
AnimatedSwitcher(
duration: Duration(milliseconds: 300),
child: Text(counter.toString(), key: ValueKey(counter)),
)
TweenAnimationBuilder - простые анимации без контроллеров:
Для анимации одного значения от
begin до
end не нужно создавать
AnimationController, слушать
addListener и вручную обновлять состояние.
TweenAnimationBuilder делает все сам: запускается при сборке, анимирует значение и перестраивает дочерний виджет на каждый кадр.
Подходит для прогресс-баров, индикаторов загрузки, плавного появления элементов, анимации размера или цвета. Главное - указать
duration и
tween.
TweenAnimationBuilder(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(seconds: 1),
builder: (context, value, child) => Opacity(opacity: value, child: child),
child: Text('Появляюсь плавно'),
)
RepaintBoundary - не перерисовывайте лишнее:
Flutter перерисовывает экран, когда меняется состояние. Но иногда часть интерфейса вообще не зависит от этих изменений - например, статическая шапка или тяжелая анимация. Без
RepaintBoundary такие виджеты будут перерисовываться вместе со всем экраном, создавая лишнюю нагрузку.
RepaintBoundary изолирует дочерний виджет в отдельный слой.
Flutter будет перерисовывать его только тогда, когда меняется что-то внутри него самого, а не при любом обновлении родителя.
RepaintBoundary(
child: HeavyWidgetThatDoesNotChangeOften(),
)
Вывод:
Все эти виджеты решают повседневные задачи: адаптивную верстку, плавную смену контента, простые анимации и оптимизацию перерисовок. Они есть в стандартной библиотеке, не требуют подключения сторонних пакетов и при этом заметно упрощают код. Если вы до сих пор писали свои велосипеды для таких случаев - попробуйте заменить их на встроенные решения.
