How to rotate an Image in flutter? Explicit Animations - RotationTransition widget

This Article is posted by seven.srikanth at 1/27/2020 6:01:33 AM



<p>RotationTransition widget can be used to Animate a rotation of a widget.</p> <p>Here's an illustration of the RotationTransition widget and output of this example program.</p> <p>![](https://fluttercentral.com/Uploads/6cbbd84a-2a89-4101-b242-b4802ea26ad7.gifwidth="50%height="auto](</p> <p>Here is an example on RotationTransition in Flutter. Copy the code to main.dart file and run it to see the output.</p> <p>color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());</p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext color: #9cdcfe;](context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( color: #9cdcfe;](title: color: #ce9178;]('Flutter Demo', color: #9cdcfe;](theme: color: #4ec9b0;](ThemeData( color: #9cdcfe;](primarySwatch: color: #4ec9b0;](Colors.color: #9cdcfe;](blue, ), color: #9cdcfe;](home: color: #4ec9b0;](MyHomePage(color: #9cdcfe;](title: color: #ce9178;]('RotationTransition Demo'), ); } }</p> <p id="9cdcfe;](title" color:="" color:="" color:="" color:="" color:="" color:="" color:=>color: #569cd6;](class color: #4ec9b0;](MyHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget ) : color: #569cd6;](super(color: #9cdcfe;](key: color: #9cdcfe;](key); color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyHomePageState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State color: #569cd6;](with color: #4ec9b0;](SingleTickerProviderStateMixin { color: #569cd6;](late color: #4ec9b0;](AnimationController color: #9cdcfe;](_controller; color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>color: #569cd6;](void color: #dcdcaa;](initState() { color: #569cd6;](super.color: #dcdcaa;](initState(); color: #9cdcfe;](_controller = color: #4ec9b0;](AnimationController(color: #9cdcfe;](duration: color: #4ec9b0;](Duration(color: #9cdcfe;](seconds: color: #b5cea8;](15), color: #9cdcfe;](vsync: color: #569cd6;](this) ..color: #dcdcaa;](repeat(); } color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p id="dcdcaa;](dispose();" color:=>color: #569cd6;](void color: #dcdcaa;](dispose() color: #9cdcfe;](@ color: #9cdcfe;](override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext color: #9cdcfe;](context) { color: #c586c0;](return color: #4ec9b0;](Scaffold( color: #9cdcfe;](appBar: color: #4ec9b0;](AppBar( color: #9cdcfe;](title: color: #4ec9b0;](Text(color: #9cdcfe;](widget.color: #9cdcfe;](title color: #569cd6;](as color: #4ec9b0;](String), ), color: #9cdcfe;](body: color: #4ec9b0;](Center( color: #9cdcfe;](child: color: #4ec9b0;](RotationTransition( color: #9cdcfe;](alignment: color: #4ec9b0;](Alignment.color: #9cdcfe;](center, color: #9cdcfe;](turns: color: #9cdcfe;](_controller, color: #9cdcfe;](child: color: #4ec9b0;](FlutterLogo( color: #9cdcfe;](size: color: #b5cea8;](100.0, ), ))); } } ` Thanks,Srikanth</p>


Tags: RotationTransition; Rotate widget;








0 Comments
Login to comment.
Recent Comments