reveal_card

Description:

reveal card

Reveal Card #

Reveal Card widget helps you to create a card with a title, description, and a background image. Also you can add a button to the card. The card also contains a backside with a title, description and a background image. The card can be revealed up and the backside can be displayed.
Sample #

Getting started #
Sample Code
RevealCard(
height: 350,
width: 350,
title: const Text(
'HP Laptop',
style: TextStyle(color: Colors.white, fontSize: 30),
),
revealIcon: const Icon(
Icons.more_vert,
color: Colors.white,
),
actionButton: FloatingActionButton(
backgroundColor: Colors.redAccent,
onPressed: () {},
child: const Icon(Icons.add_shopping_cart),
),
backgroundImage: const NetworkImage(
'https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80'),
content: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text('Company', style: TextStyle(color: Colors.white, fontSize: 18)),
Expanded(
child: Text(
'SAMSUNG',
style: TextStyle(color: Colors.white, fontSize: 18),
textAlign: TextAlign.right,
),
),
],
),
const SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text('Price', style: TextStyle(color: Colors.white, fontSize: 18)),
Expanded(
child: Text(
'\$ 1349',
style: TextStyle(color: Colors.white, fontSize: 18),
textAlign: TextAlign.right,
),
),
],
),
const SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text('Rating', style: TextStyle(color: Colors.white, fontSize: 18)),
Expanded(
child: Text(
'4.6',
style: TextStyle(color: Colors.white, fontSize: 18),
textAlign: TextAlign.right,
),
),
],
),
],
revealBackgroundImage: const NetworkImage(
'https://images.unsplash.com/photo-1603302576837-37561b2e2302?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1468&q=80'),
revealCloseIcon: const Icon(Icons.close, color: Colors.white),
revealTitle: const Text(
'Specifications',
style: TextStyle(fontSize: 26, color: Colors.white),
),
revealContent: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
'OS',
style: TextStyle(fontSize: 18, color: Colors.white),
),
Text(
'Windows 11',
style: TextStyle(fontSize: 18, color: Colors.white),
),
],
),
const SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
'Hard Drive',
style: TextStyle(fontSize: 18, color: Colors.white),
),
Text(
'SSD',
style: TextStyle(fontSize: 18, color: Colors.white),
),
],
),
],
),
copied to clipboard
Arguments #



Argument
Type
Required / Optional




title
Text
Required


revealIcon
Icon
Optional


content
List Widget
Required


height
double
Optional (Default - 300)


width
double
Optional (Default - 300)


actionButton
FloatingActionButton
Optional


backgroundImage
ImageProvider
Optional (Default - backgroundColor)


opacity
double (0 - 1)
Optional (Default - 0.5)


backgroundColor
Color
Optional (Default - White)


revealTitle
Text
Optional


revealCloseIcon
Icon
Optional


revealContent
List Widget
Optional


revealBackgroundColor
Color
Optional (Default - White)


revealBackgroundImage
ImageProvider
Optional (Default - revealBackgroundColor)


revealOpacity
double (0 - 1)
Optional (Default - 0.5)


revealDuration
Duration
Optional (Default - 200 milliseconds)



Additional information #

Front side- Title, Content, Reveal Button, Action Button, Background Image.
Back side- Title, Content, Close Button, Background Image.
Action Button - Define function to be performed on user click.

On reveal button click, the back side will be revealed with a bottom up animation.
Note #
Enlarge the height and width of the card based on the content. Otherwise the contents will get overflowed.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter