如何在Flutter中旋转小部件?

时间:2020-05-07 11:34:25

标签: flutter dart flutter-animation

有没有办法使小部件旋转动画?我尝试了RotatedBox,但是没有用。

1 个答案:

答案 0 :(得分:2)

使用AnimatedBuilder

AnimatedBuilder(
  animation: _animation, // pass AnimationController to it
  child: YourContainer(),
  builder: (_, child) {
    return Transform.rotate(
      angle: _animation.value * play_around_with_values,
      child: child,
    );
  },
)

截屏:

enter image description here


完整代码:

class _MainPageState extends State<MainPage> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2))..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (_, child) {
            return Transform.rotate(
              angle: _controller.value * 2 * math.pi,
              child: child,
            );
          },
          child: FlutterLogo(size: 200),
        ),
      ),
    );
  }
}