flutter - 动画按钮旋转

Question

我试图将自定义按钮内的图标旋转动画设置为每次按下180度。我对Flutter文档感到困惑。我知道我应该使用RotationTransition，但我只是找不到方法。这是我的按钮

     SizedBox.fromSize(
        size: Size(50, 50),
        child: ClipOval(
          child: Material(
            color: Colors.blue,
            child: InkWell(
              onTap: () {},
              splashColor: Colors.black12,
              child: RotationTransition(. //<== that is where I get
                child: Icon(
                  Icons.filter_list, //rotate this icon
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),

Answer 1

基本上，您需要一个带有AnimationController的有状态小部件，该控件创建动画控件。重要的是要在initState()方法上创建该 Controller ，然后在dispose()方法上将处置，以防止可能的错误。
有了 Controller 后，就可以使用 bool(boolean) 来存储旋转方向，并可以使用由Animation Controller 控制的Animation来旋转小部件。首先，它从0到0.5，然后从0.5到1。
代码可以像这样。您还可以查看我为该示例创建的this codepen。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatefulWidget{
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> 
  with SingleTickerProviderStateMixin{
  AnimationController _controller;
  Animation<double> _animation;
  
  bool dir = true;
  
  @override
  void initState(){
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
    super.initState();
  }
  
  @override
  void dispose(){
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    _animation = Tween<double>(
      begin: dir ? 0:0.5, 
      end: dir ? 0.5:1
    ).animate(_controller);
    
    return Scaffold(
      body: Center(
        child: RotationTransition(
          turns: _animation,
          child: RaisedButton(
            child: Text("Rotate"),
              onPressed: (){
                _controller.forward(
                  from: 0
                );
                setState(() {dir = !dir;});
              
              }
            )
          )
      ),
    );
  }
}