Last active
January 24, 2020 10:10
-
-
Save hasnentai/973c57e534ac2555a9a6f4e96310eb3c to your computer and use it in GitHub Desktop.
This file contains 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'; | |
| final Color darkBlue = Color.fromARGB(255, 18, 32, 47); | |
| void main() { | |
| runApp(MyApp()); | |
| } | |
| class MyApp extends StatefulWidget { | |
| MyApp({Key key}) : super(key: key); | |
| @override | |
| _MyAppState createState() => _MyAppState(); | |
| } | |
| class _MyAppState extends State<MyApp> with TickerProviderStateMixin { | |
| AnimationController _animationController; | |
| Animation animation; | |
| Animation _scaleAnimation; | |
| Animation _opacityAnimation; | |
| Animation _cartTranslateAnimation; | |
| Animation _cartRotateAnimation; | |
| Animation _textAnimation; | |
| Animation _textOpacity; | |
| Animation _cartItem; | |
| Animation _cartItemRotate; | |
| Animation _cartItemOpacity; | |
| double height=50.0; | |
| double width=150.0; | |
| @override | |
| void initState() { | |
| super.initState(); | |
| _animationController = AnimationController( | |
| vsync: this, duration: Duration(milliseconds: 4900)); | |
| animation = CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0, 0.1, curve: Curves.easeInOut), | |
| ); | |
| _scaleAnimation = Tween(begin: 1.0, end: 0.7).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0, 0.1, curve: Curves.elasticOut), | |
| )); | |
| _opacityAnimation = Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0, 0.1, curve: Curves.easeInOut), | |
| )); | |
| _cartTranslateAnimation = | |
| Tween(begin: -190.0, end: 0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.05, 0.5, curve: Curves.easeOutSine), | |
| )); | |
| _cartRotateAnimation = Tween(begin: 0, end: -0.2).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.4, 0.7, curve: Curves.bounceInOut), | |
| )); | |
| _textAnimation = Tween(begin: 50.0, end: 0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.65, 0.85, curve: Curves.elasticInOut), | |
| )); | |
| _textOpacity = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.65, 0.7, curve: Curves.easeIn), | |
| )); | |
| _cartItem = Tween(begin: 59.0, end: -55.0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.4, 0.48, curve: Curves.easeIn), | |
| )); | |
| _cartItemRotate = Tween(begin: 0, end: -0.4).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.46, 0.5, curve: Curves.easeInCirc), | |
| )); | |
| _cartItemOpacity = Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.49, 0.5, curve: Curves.easeIn), | |
| )); | |
| _animationController.addListener(() { | |
| setState(() { | |
| if (_animationController.value > 0.5 && | |
| _animationController.value < 0.7) { | |
| _cartTranslateAnimation = | |
| Tween(begin: 0.0, end: 190).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.5, 0.7, curve: Curves.easeIn), | |
| )); | |
| } else if (_animationController.value >= 0.7 && | |
| _animationController.value <= 0.8) { | |
| _textOpacity = Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.8, 0.9, curve: Curves.easeIn), | |
| )); | |
| } else if (_animationController.value >= 0.9) { | |
| _scaleAnimation = Tween(begin: 0.7, end: 1.0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.9, 1.0, curve: Curves.elasticOut), | |
| )); | |
| _opacityAnimation = | |
| Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.9, 1.0, curve: Curves.easeIn), | |
| )); | |
| height=50; | |
| width=150; | |
| } else if (_animationController.value >= 0.45 && | |
| _animationController.value <= 0.5) { | |
| _cartItem = Tween(begin: -55.0, end: 0.0).animate(CurvedAnimation( | |
| parent: _animationController, | |
| curve: Interval(0.45, 0.5, curve: Curves.easeIn), | |
| )); | |
| } else { | |
| height = 40.0; | |
| width = 140.0; | |
| } | |
| }); | |
| }); | |
| } | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| debugShowCheckedModeBanner: false, | |
| theme: ThemeData.light().copyWith( | |
| scaffoldBackgroundColor: Colors.white, | |
| textTheme: TextTheme( | |
| body1: TextStyle(color: Color(0xFFFFFFFF), fontSize: 18.0), | |
| )), | |
| home: Scaffold( | |
| body: Center( | |
| child: GestureDetector( | |
| onTap:(){ | |
| _animationController.forward(); | |
| }, | |
| child:AnimatedContainer( | |
| height: height, | |
| width: width, | |
| curve: Curves.elasticOut, | |
| decoration: BoxDecoration( | |
| borderRadius: BorderRadius.circular(30.0), | |
| color: Color(0XFF2753FF)), | |
| duration: Duration(milliseconds: 500), | |
| child: Stack( | |
| fit: StackFit.loose, | |
| alignment: Alignment.center, | |
| children: <Widget>[ | |
| Positioned.fill( | |
| left: _cartTranslateAnimation.value, | |
| child: Transform.rotate( | |
| angle: _cartRotateAnimation.value, | |
| origin: Offset(2.0, 0), | |
| child: Icon(Icons.shopping_cart, color: Colors.white), | |
| ), | |
| ), | |
| Positioned.fill( | |
| top: _cartItem.value, | |
| child: Transform.rotate( | |
| angle: _cartItemRotate.value, | |
| origin: Offset(2.0, 0), | |
| child: Opacity( | |
| opacity: _cartItemOpacity.value, | |
| child: Icon(Icons.more_horiz, color: Colors.white)), | |
| ), | |
| ), | |
| Positioned.fill( | |
| top: _textAnimation.value, | |
| child: Opacity( | |
| opacity: _textOpacity.value, | |
| child: Align( | |
| alignment: Alignment.center, child: Text("Added")), | |
| ), | |
| ), | |
| Opacity( | |
| opacity: _opacityAnimation.value, | |
| child: ScaleTransition( | |
| scale: _scaleAnimation, | |
| child: Row( | |
| mainAxisSize: MainAxisSize.min, | |
| children: <Widget>[ | |
| RotationTransition( | |
| turns: animation, | |
| child: Icon(Icons.add, color: Colors.white), | |
| ), | |
| SizedBox(width: 10.0), | |
| Text("Add To Cart") | |
| ], | |
| )), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| ), | |
| )); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment