Чтобы создать анимацию вращения значка во 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 при его нажатии. Вы можете выбрать метод, который лучше всего соответствует вашим потребностям.