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.
.png?alt=media&token=f1ba8668-adf0-480b-968b-d21a1d0dc3bc)
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.

Styling helps you customize a widget that matches your design. Card widget offers you to customize the background color, elevation, and rounded corners.
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.
.gif?alt=media&token=c1a9188f-eeeb-479d-966e-2a4ae4d9d566)
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.
.gif?alt=media&token=917cd165-2aab-4783-b32b-f85ee7c69c2e)
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.
.gif?alt=media&token=03a95eca-bbfe-4056-874a-80276d481917)
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.

To perform any action on click of the Card, add an Action in FlutterFlow. You can find the instructions on adding the Action here.
Last modified 7mo ago