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.