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

Метод 1: использование AnimatedBuilder
Виджет AnimatedBuilder — это удобный инструмент для создания пользовательских анимаций во Flutter. Чтобы добиться анимации вращения при нажатии кнопки, выполните следующие действия:

Шаг 1. Импортируйте необходимые пакеты:

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

Шаг 2. Определите виджет StatefulWidget:

class RotatingIconAnimation extends StatefulWidget {
  @override
  _RotatingIconAnimationState createState() => _RotatingIconAnimationState();
}

Шаг 3. Реализуйте класс State:

class _RotatingIconAnimationState extends State<RotatingIconAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(_controller);
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: AnimatedBuilder(
        animation: _animation,
        builder: (BuildContext context, Widget child) {
          return Transform.rotate(
            angle: _animation.value * 2.0 * 3.141592653589793,
            child: Icon(Icons.play_arrow),
          );
        },
      ),
      onPressed: () {
        if (_controller.isCompleted) {
          _controller.reverse();
        } else {
          _controller.forward();
        }
      },
    );
  }
}

Шаг 4. Используйте виджет RotatingIconAnimation:

RotatingIconAnimation(),

Метод 2: использование Transform.rotate
Другой подход к созданию анимации вращения при нажатии кнопки — непосредственное использование виджета Transform.rotate. Вот пример:

class RotatingIconAnimation extends StatefulWidget {
  @override
  _RotatingIconAnimationState createState() => _RotatingIconAnimationState();
}
class _RotatingIconAnimationState extends State<RotatingIconAnimation> {
  bool _isRotated = false;
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Transform.rotate(
        angle: _isRotated ? 2.0 * 3.141592653589793 : 0.0,
        child: Icon(Icons.play_arrow),
      ),
      onPressed: () {
        setState(() {
          _isRotated = !_isRotated;
        });
      },
    );
  }
}

В этой статье мы рассмотрели два метода создания анимации вращения при нажатии кнопки с помощью Flutter. В первом методе использовался виджет AnimatedBuilder, который позволяет создавать более сложные и настраиваемые анимации. Во втором методе использовался виджет Transform.rotate, предоставляющий более простое решение для базовой анимации вращения. Реализуя эти методы, вы можете добавить интерактивности и визуальной привлекательности своим приложениям Flutter.