Animations in Flutter v2.0 Devfest CZ

Animations in Flutter presentation for Devfest CZ 2018.

Transcript

1. ANIMATIONS IN FLUTTER @salihgueler MUHAMMED SALIH GULER
2. @salihgueler WHAT IS FLUTTER?
3. @salihgueler WHY ANIMATIONS ARE IMPORTANT?
4. @salihgueler Credit: uxinmotion Why animations are important?
5. @salihgueler ANIMATIONS IN FLUTTER
6. @salihgueler ANIMATION TYPES IN FLUTTER • Physics-based Animations • Tween Animations
7. @salihgueler TWEEN ANIMATIONS
8. @salihgueler Credit: uxinmotion Tween Animations
9. @salihgueler EASING ANIMATION
10. @salihgueler > $ flutter create flutter_animations Easing Animation
11. @salihgueler void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Animation Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new EasingAnimationWidget(), ); } } void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Animation Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new EasingAnimationWidget(), ); } } Easing Animation
12. @salihgueler void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Animation Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new EasingAnimationWidget(), ); } } void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Animation Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new EasingAnimationWidget(), ); } } Easing Animation
13. @salihgueler class EasingAnimationWidget extends StatefulWidget { @override EasingAnimationWidgetState createState() => EasingAnimationWidgetState(); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> { @override Widget build(BuildContext context) { //TODO: Layout goes here } } Easing Animation
14. @salihgueler class EasingAnimationWidget extends StatefulWidget { @override EasingAnimationWidgetState createState() => EasingAnimationWidgetState(); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, ))); } } class EasingAnimationWidget extends StatefulWidget { @override EasingAnimationWidgetState createState() => EasingAnimationWidgetState(); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, ))); } } Easing Animation
15. @salihgueler class EasingAnimationWidget extends StatefulWidget { @override EasingAnimationWidgetState createState() => EasingAnimationWidgetState(); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, ))); } } class EasingAnimationWidget extends StatefulWidget { @override EasingAnimationWidgetState createState() => EasingAnimationWidgetState(); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, ))); } } Easing Animation
16. @salihgueler class EasingAnimationWidget extends StatefulWidget { @override EasingAnimationWidgetState createState() => EasingAnimationWidgetState(); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, ))); } } class EasingAnimationWidget extends StatefulWidget { @override EasingAnimationWidgetState createState() => EasingAnimationWidgetState(); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, ))); } } Easing Animation
17. @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } Easing Animation
18. @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } Easing Animation
19. @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } Easing Animation
20. @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } Easing Animation
21. @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } Easing Animation
22. @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } Easing Animation
23. @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } Easing Animation
24. @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } Easing Animation
25. @salihgueler class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } class EasingAnimationWidgetState extends State<EasingAnimationWidget> with TickerProviderStateMixin { 
 
 AnimationController _controller; Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); } Easing Animation
26. @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Easing Animation
27. @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Easing Animation
28. @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Easing Animation
29. @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Easing Animation
30. @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Easing Animation
31. @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Easing Animation
32. @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Easing Animation
33. @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Easing Animation
34. @salihgueler @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; _controller.forward(); return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0), child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override void dispose() { _controller.dispose(); super.dispose(); } Easing Animation
35. @salihgueler ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… Easing Animation
36. @salihgueler ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… Easing Animation
37. @salihgueler ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… Easing Animation
38. @salihgueler ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… Easing Animation ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } ……
39. @salihgueler ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… Easing Animation ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } ……
40. @salihgueler ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } …… Easing Animation ……
 
 _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } ……
41. @salihgueler OFFSET & DELAY ANIMATION
42. @salihgueler Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } Offset & Delay Animation
43. @salihgueler Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } Offset & Delay Animation
44. @salihgueler Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } Animation _lateAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); _animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, ))..addStatusListener(handler); _lateAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))); } void handler(status) { if (status == AnimationStatus.completed) { _animation.removeStatusListener(handler); _controller.reset(); _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Curves.fastOutSlowIn, )); _lateAnimation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( parent: _controller, curve: Interval( 0.2, 1.0, curve: Curves.fastOutSlowIn, ))) ..addStatusListener((status) { if (status == AnimationStatus.completed) { Navigator.pop(context); } }); _controller.forward(); } } Offset & Delay Animation
45. @salihgueler Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Offset & Delay Animation Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))),
46. @salihgueler Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Offset & Delay Animation Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))),
47. @salihgueler Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Offset & Delay Animation Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))),
48. @salihgueler Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Offset & Delay Animation Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))),
49. @salihgueler Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Offset & Delay Animation Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))),
50. @salihgueler Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Offset & Delay Animation Transform( transform: Matrix4.translationValues( _animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))), Transform( transform: Matrix4.translationValues( _lateAnimation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 30.0, color: Colors.black12, ), ))),
51. @salihgueler PARENTING ANIMATION
52. @salihgueler Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } Parenting Animation
53. @salihgueler Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } Parenting Animation
54. @salihgueler Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } Animation growingAnimation; Animation animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); growingAnimation = Tween(begin: 10.0, end: 100.0) .animate(CurvedAnimation(parent: controller, curve: Curves.easeIn)); animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: controller, curve: Curves.easeIn, )) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } Parenting Animation
55. @salihgueler Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))), Parenting Animation Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))),
56. @salihgueler Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))), Parenting Animation Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))),
57. @salihgueler Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))), Parenting Animation Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: Center( child: Container( height: growingAnimation.value, width: growingAnimation.value * 2, color: Colors.black12, ))), Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0, ), child: Center( child: Container( padding: const EdgeInsets.only(top: 16.0), child: Container( width: 200.0, height: 100.0, color: Colors.black12, ), ))),
58. @salihgueler TRANSFORMATION & MASKING ANIMATION
59. @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } Transformation & Masking Animation
60. @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } Transformation & Masking Animation
61. @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } Transformation & Masking Animation
62. @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } Transformation & Masking Animation
63. @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } Transformation & Masking Animation
64. @salihgueler @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 2000), vsync: this) ..addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); transitionTween = Tween<double>( begin: 50.0, end: 200.0, ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); borderRadius = BorderRadiusTween( begin: BorderRadius.circular(75.0), end: BorderRadius.circular(0.0), ).animate( CurvedAnimation( parent: _controller, curve: Curves.ease, ), ); _controller.forward(); } Transformation & Masking Animation
65. @salihgueler @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Stack( children: <Widget>[ Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Stack( children: <Widget>[ Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); } Transformation & Masking Animation
66. @salihgueler @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Stack( children: <Widget>[ Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Stack( children: <Widget>[ Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); } Transformation & Masking Animation
67. @salihgueler @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Stack( children: <Widget>[ Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Stack( children: <Widget>[ Center( child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), Center( child: Container( alignment: Alignment.bottomCenter, width: transitionTween.value, height: transitionTween.value, decoration: BoxDecoration( color: Colors.black12, borderRadius: borderRadius.value, ), )), ], ))); }, ); } Transformation & Masking Animation
68. @salihgueler VALUE CHANGE ANIMATION
69. @salihgueler @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); } @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); } Value Change Animation
70. @salihgueler @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); } @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); } Value Change Animation
71. @salihgueler @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); } @override void initState() { super.initState(); controller = AnimationController( duration: const Duration(milliseconds: 1000), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); animation = IntTween(begin: 0, end: 10).animate(curve) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } if (status == AnimationStatus.dismissed) { Navigator.pop(context); } }); } @override Widget build(BuildContext context) { controller.forward(); return AnimatedBuilder( animation: controller, builder: (BuildContext context, Widget child) { return Scaffold( body: Center( child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)), )); }); } Value Change Animation
72. @salihgueler
73. @salihgueler PHYSICS - BASED ANIMATIONS
74. @salihgueler Physics-Based Animation
75. @salihgueler // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart'; // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart'; Physics-Based Animation
76. @salihgueler // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart'; // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart'; Physics-Based Animation
77. @salihgueler // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart'; // Copyright 2016 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /// Simple one-dimensional physics simulations, such as springs, friction, and /// gravity, for use in user interface animations. /// /// To use, import `package:flutter/physics.dart`. library physics; export 'src/physics/clamped_simulation.dart'; export 'src/physics/friction_simulation.dart'; export 'src/physics/gravity_simulation.dart'; export 'src/physics/simulation.dart'; export 'src/physics/spring_simulation.dart'; export 'src/physics/tolerance.dart'; export 'src/physics/utils.dart'; Physics-Based Animation
78. @salihgueler SPRING ANIMATION Spring Animation
79. @salihgueler double _squareEdgeSize = 200.0; SpringDescription _spring = SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); } double _squareEdgeSize = 200.0; SpringDescription _spring = SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); } Spring Animation
80. @salihgueler double _squareEdgeSize = 200.0; SpringDescription _spring = SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); } double _squareEdgeSize = 200.0; SpringDescription _spring = SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); } Spring Animation
81. @salihgueler double _squareEdgeSize = 200.0; SpringDescription _spring = SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); } double _squareEdgeSize = 200.0; SpringDescription _spring = SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0); SpringSimulation _springSimulation; AnimationController _animationController; @override initState() { super.initState(); _animationController = AnimationController( vsync: this, lowerBound: double.negativeInfinity, upperBound: double.infinity, )..addListener(() { setState(() { _squareEdgeSize = _animationController.value; }); }); } Spring Animation
82. b @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } Spring Animation
83. b @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } Spring Animation
84. b @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } @override Widget build(BuildContext context) { final double height = MediaQuery.of(context).size.height; _springSimulation = SpringSimulation(_spring, _squareEdgeSize, height, _animationController.velocity); _animationController.animateWith(_springSimulation); return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget child) { return Scaffold( body: Transform( transform: Matrix4.translationValues(0.0, _squareEdgeSize - 200.0, 0.0), child: Align( alignment: Alignment.topCenter, child: Container( width: 200.0, height: 200.0, color: Colors.black12, )), )); }); } Spring Animation
85. @salihgueler Credit: InVision Credit: Frank Rapacciuolo Credit: ColinGarven CONCLUSION
86. @salihgueler THANK YOU! GitHub: https://github.com/salihgueler/flutter-animations Medium: https://proandroiddev.com/animations-in-flutter-6e02ee91a0b2 Twitter: https://twitter.com/salihgueler