Вращающаяся анимация Flutter для значка при нажатии: несколько методов с примерами кода

Чтобы создать анимацию вращения значка во Flutter при его нажатии, вы можете использовать различные методы. Вот несколько примеров кода:

Метод 1: AnimatedContainer с Transform.rotate

import 'package:flutter/material.dart';
class RotatingIcon extends StatefulWidget {
  @override
  _RotatingIconState createState() => _RotatingIconState();
}
class _RotatingIconState extends State<RotatingIcon> {
  bool _isPressed = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isPressed = !_isPressed;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 200),
        transform: Matrix4.rotationZ(_isPressed ? 0.5 : 0),
        child: Icon(Icons.add),
      ),
    );
  }
}

Метод 2: AnimatedBuilder с RotationTransition

import 'package:flutter/material.dart';
class RotatingIcon extends StatefulWidget {
  @override
  _RotatingIconState createState() => _RotatingIconState();
}
class _RotatingIconState extends State<RotatingIcon>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _isPressed = false;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
    );
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isPressed = !_isPressed;
          if (_isPressed) {
            _controller.forward();
          } else {
            _controller.reverse();
          }
        });
      },
      child: AnimatedBuilder(
        animation: _controller,
        builder: (BuildContext context, Widget child) {
          return RotationTransition(
            turns: _controller,
            child: Icon(Icons.add),
          );
        },
      ),
    );
  }
}

Метод 3: собственный анимированный виджет с Matrix4.rotationZ

import 'package:flutter/material.dart';
class RotatingIcon extends StatefulWidget {
  @override
  _RotatingIconState createState() => _RotatingIconState();
}
class _RotatingIconState extends State<RotatingIcon>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _isPressed = false;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
    );
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isPressed = !_isPressed;
          if (_isPressed) {
            _controller.forward();
          } else {
            _controller.reverse();
          }
        });
      },
      child: AnimatedIcon(
        icon: AnimatedIcons.add_event,
        progress: _controller,
      ),
    );
  }
}

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