Created
September 16, 2019 07:55
-
-
Save benznest/e03fcbe5dd7ea886942115849d5f59bc to your computer and use it in GitHub Desktop.
Basic Animation Practice
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Animation Practice', | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: MyHomePage(), | |
); | |
} | |
} | |
class MyHomePage extends StatefulWidget { | |
MyHomePage({Key key}) : super(key: key); | |
@override | |
_MyHomePageState createState() => _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { | |
AnimationController animationController; | |
@override | |
void initState() { | |
animationController = AnimationController(duration: Duration(milliseconds: 1000), vsync: this); | |
animationController.addListener(() { | |
setState(() { | |
print(animationController.value); | |
}); | |
}); | |
super.initState(); | |
} | |
@override | |
void dispose() { | |
animationController.dispose(); | |
super.dispose(); | |
} | |
Widget buildFadeTransitionWidget({AnimationController controller, Widget widget}) { | |
return AnimatedBuilder( | |
animation: controller, | |
child: widget, | |
builder: (context, child) { | |
return FadeTransition(opacity: Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(parent: controller, curve: Curves.decelerate)), child: child); | |
}); | |
} | |
Widget buildScaleTransitionWidget({AnimationController controller, Widget widget}) { | |
return AnimatedBuilder( | |
animation: controller, | |
child: widget, | |
builder: (context, child) { | |
return ScaleTransition(scale: Tween<double>(begin: 0, end: 1).animate(controller), child: child); | |
}); | |
} | |
Widget buildRotateTransitionWidget({AnimationController controller, Widget widget}) { | |
return AnimatedBuilder( | |
animation: controller, | |
child: widget, | |
builder: (context, child) { | |
return RotationTransition(turns: Tween<double>(begin: 0, end: 0.5).animate(controller), child: child); | |
}); | |
} | |
Widget buildSizeTransitionWidget({AnimationController controller, Widget widget}) { | |
return AnimatedBuilder( | |
animation: controller, | |
child: widget, | |
builder: (context, child) { | |
return SizeTransition(axis: Axis.horizontal, axisAlignment: 2, sizeFactor: Tween<double>(begin: 0, end: 1).animate(controller), child: child); | |
}); | |
} | |
Widget buildMultiTransitionWidget({AnimationController controller, Widget widget}) { | |
return buildScaleTransitionWidget( | |
controller: controller, | |
widget: buildFadeTransitionWidget( | |
controller: controller, widget: buildRotateTransitionWidget(controller: controller, widget: buildSizeTransitionWidget(controller: controller, widget: widget)))); | |
} | |
// | |
@override | |
Widget build(BuildContext context) { | |
var tween = Tween<double>(begin: 0, end: 250).animate(animationController); | |
return Scaffold( | |
appBar: AppBar( | |
title: Text("Animation"), | |
), | |
body: Center( | |
child: | |
Container( | |
width: tween.value / 2, | |
height: tween.value, | |
color: Colors.pink[400], | |
)), | |
floatingActionButton: FloatingActionButton( | |
child: Icon(Icons.play_arrow), | |
onPressed: () { | |
if (animationController.isCompleted) { | |
animationController.reverse(); | |
} else { | |
animationController.forward(); | |
} | |
}, | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment