flip_card is a component that provides a flip card animation. It could be used for hiding and showing details of a product. A sample video is given below to get an idea about what we are going to do in this article.
Installing
Add the dependency into pubspec.yaml file.
dependencies: flip_card: ^0.6.0
Syntax of usage
Create a FlipCard. The card will flip when touched. Touch property is true by default.
Dart
FlipCard( fill: Fill.fillBack,
direction: FlipDirection.HORIZONTAL, // default
front: Container( // required
child: Text( 'Front' ),
),
back: Container( // required
child: Text( 'Back' ),
),
); |
Properties
Property |
Description |
---|---|
front | This is required property that show the front content. |
back | This is required property that show the back content. |
speed | Speed of flip of card. |
flipOnTouch | Enable the card to flip when touched. |
direction | Enable the direction in which card can flip, Horizontal or vertical. |
alignment | Set the alignment of the content. |
fill | Fill the back side of the card to make in the same size as the front. |
void Function()? onFlip, | Function to implement task during flipping. |
void Function(bool)? onFlipDone, | Function to implement task after the flip done. |
To use it import the package.
import 'package:flip_card/flip_card.dart';
Code Example
Dart
import 'package:flip_card/flip_card.dart' ;
import 'package:flutter/material.dart' ;
// main function calling // to the MyFlipCard class. void main() {
runApp(MyFlipCard());
} // Class MyFlipCard is stateful class. class MyFlipCard extends StatefulWidget {
const MyFlipCard({Key? key}) : super(key: key);
@override
State<MyFlipCard> createState() => _MyFlipCardState();
} class _MyFlipCardState extends State<MyFlipCard> {
@override
Widget build(BuildContext context) {
// returning MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false ,
home: Scaffold(
appBar: AppBar(
title: Text( "Flip Card" ),
),
// body has a center with row child.
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Flipcard with vertical
// direction when flip
FlipCard(
direction: FlipDirection.VERTICAL,
// front of the card
front: Container(
alignment: Alignment.center,
width: 200,
height: 200,
color: Colors.red,
child: Text( "Front" ),
),
// back of the card
back: Container(
alignment: Alignment.center,
width: 200,
height: 200,
color: Colors.teal,
child: Text( "Back" ),
),
),
SizedBox(width: 30,),
// 2nd card showing Horizontal FlipDirection
FlipCard(
direction: FlipDirection.HORIZONTAL,
// front of the card
front: Container(
alignment: Alignment.center,
width: 200,
height: 200,
color: Colors.red,
child: Text( "Front" ),
),
// back of the card
back: Container(
alignment: Alignment.center,
width: 200,
height: 200,
color: Colors.teal,
child: Text( "Back" ),
),
),
],
),
),
),
);
}
} |
Explanation
- main method is the principal method called once the program is loaded.
- Once program is loaded runApp will run and call our class that we created MyFlipCard to be runned.
- This class is stateful widget to detect FlipCard state.
- Creating a MaterialApp that allow us to use Scaffold.
- Scaffold allow us to use the appbar and body.
- The appbar have simple title.
- Body contains centered row.
- A row allows us to have multiple child that is children with mainAxisAlignment to center.
- Row have three children, Two FlipCard and sizedbox.
- FlipCard Direction set Vertically and Horizontally respectively.
- Front show a container 200×200 red having text front.
- Back show a container 200×200 teal having text back.
Output
Article Tags :
Recommended Articles