flutter - 颤振旋转小部件

Question

如何将以下图标旋转 180 度？（我想稍后对其进行动画处理，RotationTransition对我来说不是一个好选择）

Icon(Icons.keyboard_arrow_down)

Answer 1

您好，您只需使用Transform小部件即可。

 Transform.rotate(
      angle: pi, // in radians
      child: Icon(Icons.keyboard_arrow_down),
  );

Answer 2

以下是动画旋转的方法，您也可以使用 animationController 将动画停止在 180°：

import 'package:flutter/material.dart';

void main() {
  runApp(new IconRotate());
}

class IconRotate extends StatefulWidget {
  @override
  _IconRotateState createState() => new _IconRotateState();
}

class _IconRotateState extends State<IconRotate>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this, //for using only a single AnimationController
      duration: new Duration(seconds: 5),
    );

    animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      alignment: Alignment.center,
      color: Colors.white,
      child: new AnimatedBuilder(
        animation: animationController,
        child: new Container(
          height: 150.0,
          width: 150.0,
          child: Icon(Icons.keyboard_arrow_down),
        ),
        builder: (BuildContext context, Widget _widget) {
          return new Transform.rotate(
            angle: animationController.value * 6.3,
            child: _widget,
          );
        },
      ),
    );
  }
}