Во Flutter анимации - это красиво, но если ими не управлять, они могут съедать ресурсы даже тогда, когда их никто не видит. Сегодня разберем два инструмента, которые помогут анимациям не тормозить интерфейс и не работать впустую.
AnimatedBuilder - перерисовываем только то, что нужно:
По умолчанию при каждом кадре анимации перестраивается весь виджет, который содержит AnimationController. Если внутри есть тяжелые элементы, это бьет по производительности.
AnimatedBuilder решает эту проблему. Он разделяет анимируемую часть и статический контент. Статический контент передается через параметр child и не пересоздается при каждом кадре. Перерисовывается только то, что реально меняется.
AnimatedBuilder(
animation: _animationController,
child: Container(
width: 300,
height: 300,
color: Colors.blue,
child: const Center(child: Text('Привет!')),
),
builder: (context, child) {
return Transform.rotate(
angle: _controller.value * 2 * pi,
child: child,
);
},
)
TickerMode - останавливаем анимацию, когда ее не видно:
Если пользователь свернул приложение или переключился на другой экран, а анимация продолжает работать, это пустая трата ресурсов процессора и батареи.
TickerMode позволяет отключать все анимации в определенной части дерева виджетов. Достаточно обернуть нужный участок и передать enabled: false. Все AnimationController, связанные с TickerProviderStateMixin, автоматически приостановятся.
TickerMode(
enabled: _isActive,
child: MyWidget(),
)
🔗 Читать подробнее
💡 Вывод:
AnimatedBuilder помогает не перерисовывать статику при каждом кадре, а TickerMode - не тратить ресурсы на анимацию, которую никто не видит. Вместе они делают приложение плавнее и экономичнее. Если вы используете анимации в своих проектах, эти два виджета должны быть в вашем арсенале.
Подписаться на канал:
➡️ Flutter & Dart | Мобильный трудоголик
Закрытый канал:
🚀 Мобильный трудоголик PRO