Card

The Card widget is used to represent some related information. For example, you can use a Card widget to show a Business card, restaurant information, movie details, etc.
The Card widget is frequently used with a List to display the item information for a specific record.
Adding a Card to Your Project
Here's an example of how you can use a Card widget in your project:
First, Drag the Column widget from the Layout Elements tab (in the Widget Panel).
Now, add the Card widget itself by dragging it from the same Layout Elements tab or add it directly from the widget tree.
Again, Add the Column widget inside the Card and set its Cross Axis Alignment To Strech. 
Add one Image widget inside the Column of the Card and set its height to 200.
Add a Text widget. Change the name to Movie Name and the Theme Style to Title 1. Set the Left Padding to 10.
Add another Text. Change the name to Movie Details. Set the Left Padding to 10.
Customizing
The Properties Panel can be used to customize the behavior of your Card widget.
Add Padding
​Here are the instructions on how to add padding.
Styling the Card
Styling helps you customize a widget that matches your design. Card widget offers you to customize the background color, elevation, and rounded corners.
Changing a Background Color
To change background color to the Card:
Select the Card from the widget tree or from the canvas area. 
Move to the Property Editor and navigate to the Color under the Card Properties.
Click on the Unset text, Enter the color code and click Use Selected Color. You can also change the color by either clicking on Palette or the Simple button.
Changing the Elevation of the Card
To change the elevation (depth or Z-axis) of the Card:
Select the Card from the widget tree or from the canvas area. 
Inside the Property Editor, move to the Elevation text input under the Card properties.
Enter the value to see the drop shadow effect below the Card. The Higher value sets the bigger size of the shadow.
Changing the Rounded Corners of the Card
To change the rounded corner of the Card:
Select the Card from the widget tree or from the canvas area. 
Inside the Property Editor, move to the Border Radius section under the Card properties.
Click on the lock icon.(
)
Enter the value to adjust the rounding of the corners.
Use the 
 Lock button to change the Left, Top, Right, and Bottom corners of the Card at the same time. Unlocking will allow you to change each value separately.
Set color dynamically
See how to set a color from variable to any color property of this widget.
Adding Action
To perform any action on click of the Card, add an Action in FlutterFlow. You can find the instructions on adding the Action here.
Show/Hide Card
Please find the instructions to show/hide the widget here.

Stack

ListView

Last modified 7mo ago