🧩AnimatedBuilder

Что такое AnimatedBuilder

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

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

В этом примере мы создаем вращающийся квадрат, используя AnimatedBuilder.

import 'package:flutter/material.dart';

class AnimatedBuilderExample extends StatefulWidget {
  const AnimatedBuilderExample({super.key});

  @override
  _AnimatedBuilderExampleState createState() => _AnimatedBuilderExampleState();
}

class _AnimatedBuilderExampleState extends State<AnimatedBuilderExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),         // Пример: длительность анимации
      vsync: this,
    )..repeat();                              // Анимация будет повторяться
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedBuilder Example')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,             // Пример: контроллер анимации
          builder: (context, child) {
            return Transform.rotate(          // Пример: анимация вращения
              angle: _controller.value * 2 * 3.14159, // 2π радианов = 360°
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

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

  1. Создание AnimationController — контроллер управляет временем и частотой анимации. Здесь он настроен на повторяющуюся анимацию с длительностью 2 секунды.

  2. AnimatedBuilder — виджет, который связывается с контроллером анимации. Когда значение анимации изменяется, AnimatedBuilder вызывает свою функцию builder и перерисовывает только те части виджета, которые изменяются.

  3. Transform.rotate — использует значение анимации, чтобы вращать квадрат на 360 градусов.

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

  1. animation

    • Описание: Анимация, которой управляет виджет AnimatedBuilder.

    • Пример:

      animation: _controller

    • Применение: Управляет обновлением функции builder каждый раз при изменении значения анимации.

  2. builder

    • Описание: Функция, которая выполняется при изменении значения анимации. Она обновляет виджет, используя текущее значение анимации.

    • Пример:

      builder: (context, child) {
  return Transform.rotate(
    angle: _controller.value * 2 * 3.14159,
    child: child,
  );
}

    • Применение: В этой функции определяется, что конкретно будет анимироваться и как это будет выглядеть на экране.

  3. child

    • Описание: Виджет, который передается в builder и который остается неизменным во время анимации. Это повышает производительность, так как child не перестраивается при каждом обновлении анимации.

    • Пример:

      child: Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

    • Применение: Используется для постоянных элементов, которые не зависят от анимации.

Итог

AnimatedBuilder — полезный виджет для создания оптимизированных анимаций. Он позволяет обновлять только те части интерфейса, которые должны анимироваться, что повышает производительность приложения и упрощает работу с анимациями.

PreviousHeroNextAnimatedPositioned

Last updated