Flutter widget is built using a modern framework. It is like a react. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes this of what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state.
In this article, we will Explore Flip Animation In Flutter Using the flip_card package With the help of the package, we can easily achieve flutter flip animation card and describes his some properties and how to use them in your flutter applications. So let’s get started.
Table Of Contents:
Flip Animation:
This Component that provides flip card animation. It is used to hide and show a product. The card will flip when touched. We can flip it vertically or in the horizontal direction. Let us understand some of its properties.
Properties of the Flip Card:
The following are the basic properties of the Flip Card.
- front: With the help of front properties, we rotate our card 90 degrees from back to front.
- back: With the help of back properties, we rotate our card 90–180 degrees from front to back.
- speed: We use speed properties to manage the speed of the card.
- fliponTouch: We use the fliponTouch properties when we do not have to rotate the card or image. And it is a bool type.
- direction: We can rotate it vertically and horizontally using the direction property.
Demo Module:
This demo module video uses a flip card package. In which there are two different containers, which when pressed, will rotate vertically and horizontally
Implementation :
You need to implement it in your code respectively:
Create a new dart file called flip_animation_demo.dart inside the lib folder.
Step 1: Add dependencies.
Add dependencies to pubspec — yaml file.
dependencies:
flip_card: ^0.4.4
Step 2: import the package :
import 'package:flip_card/flip_card.dart';
Step 3: Run flutter package get
In this screen, we have two different containers. In which we have used the flip card package and wrap the container with FlipCard. In this, we have rotated it vertically and horizontally with the help of the direction property. And there is different colour and text on the front and backside of the container.
Let us understand this with the help of a reference.
FlipCard(
direction: FlipDirection.HORIZONTAL,
front: Stack(
alignment: Alignment.center,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.orange.shade200,
),
),
Text(
'Front',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w600),
),
],
),
back: Stack(
alignment: Alignment.center,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.blue.shade400,
),
),
Text(
'Back',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w600),
),
],
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:ui';
import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
class FlipAnimationDemo extends StatefulWidget {
@override
_FlipAnimationDemoState createState() => _FlipAnimationDemoState();
}
class _FlipAnimationDemoState extends State<FlipAnimationDemo> {
double _height;
double _width;
@override
Widget build(BuildContext context) {
_height = MediaQuery.of(context).size.height;
_width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text('Flip Animation Demo'),
),
body: Container(
width: _width,
height: _height,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
Text(
'Vertical Flip Animation',
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w600,
letterSpacing: 0.5),
),
Container(
width: 180,
height: 180,
margin: EdgeInsets.only(top: 20),
child: FlipCard(
direction: FlipDirection.VERTICAL, // default
front: Stack(
alignment: Alignment.center,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.blue.shade400,
),
),
Text(
'Front',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w600),
),
],
),
back: Stack(
alignment: Alignment.center,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.orange.shade200,
),
),
Text(
'Back',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w600),
),
],
),
),
),
],
),
Column(
children: [
Text(
'Horizontal Flip Animation',
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w600,
letterSpacing: 0.5),
),
Container(
width: 180,
height: 180,
margin: EdgeInsets.only(top: 20),
child: FlipCard(
direction: FlipDirection.HORIZONTAL,
front: Stack(
alignment: Alignment.center,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.orange.shade200,
),
),
Text(
'Front',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w600),
),
],
),
back: Stack(
alignment: Alignment.center,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.blue.shade400,
),
),
Text(
'Back',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w600),
),
],
),
),
),
],
),
],
),
),
);
}
}
Conclusion:
In this article, I have explained a Flip Animation demo, which you can modify and experiment with according to your own, this little introduction was from the Flip Animation demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Flip Animation in your flutter project. We will show you the Flip Animation is?, and working on it in your flutter applications, So please try it.
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
If we got something wrong? Let me know in the comments. we would love to improve.
Feel free to connect with us
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
