Flutter Credit Card Animation
Animations are a useful supplement to great UX design and provides a layer of delight, fun, reassurance, and meaning to interactions. Flutter provides a wide range of animations from animated widget to custom animations.
Lets have a look at what you gonna learn today
To achieve the above animation we will use AnimatedPositioned, AnimatedContainer and flutter_credit_card package for Credit Card widget.
Wooh !! Hold a minute,that’s it?
Let’s get started
AnimatedPositioned will automatically transits the child’s position whenever the given values changes.
Whereas AnimatedContainer will automatically transits the child’s properties from old values to new values.
To use AnimatedPositioned we must have Stack as the parent of AnimatedPositioned
In the above code we are creating a FloatingActionButton which changes the values of AnimatedContainer and topof AnimatedPositioned. The initial value of the height and width for the AnimatedContainer is 0, and top position of AnimatedContainer is 700.
On clicking the FloatingActionButton we are changing the containerHeight , containerWidth and topPosition which will change the values of AnimatedContainer and AnimatedPositioned . This will provide animation from old state to new state.
We are setting the animation duration for AnimatedPositioned and AnimatedContainer by using duration property.
The curve property allow us to change the rate of animation. The the bounce effect in the above GIF was due to Curves.elasticOut . Flutter provides a collection of common animation curves . Click here to know more.
That’s great, but where is the Credit Card?
Import the package flutter_credit_card which allows you to easily implement the Credit card’s UI easily with the Card detection.
First thing first ! Let’s add dependency to pubspec.yaml
dependencies:
flutter_credit_card: 0.1.1Create a variable showBackOfCard type bool to control the credit card view.
CreditCardWidget(
cardNumber: "5124 8084 4590 3194",
expiryDate: "01/25",
cardHolderName: "Ayush Bherwani",
cvvCode: "565",
showBackView: showBackOfCard, //show cvv when true
cardbgColor: Colors.white,
height: 175,
textStyle: TextStyle(color: Colors.black),
animationDuration: Duration(seconds: 1),
),The animationDuration is the time taken to animate to the back view of the card to show CVV code.
To change the value of showBackOfCard wrap CreditCardWidget inside GestureDetector . GestureDetector will be child of AnimatedContainer
GestureDetector(
onTap: () {
setState(() {
showBackOfCard = !showBackOfCard;
});
},
child: //CreditCardWidget
)Time to test the app
Run flutter run command in terminal to run your app.
You can find the source code below
Hey Readers, I’m a Mobile Application Developer who loves to explore deep sea of Flutter widgets. If you liked this article and found this helpful don’t forget to appreciate by a 50 claps :p
If you have any questions or suggestions feel free to comment below or you can connect with me on
Checkout my Recent Articles
