FlutterFlow Docs
Search…
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.

Changing the properties

The Properties Panel can be used to customize the behavior of your Card widget.

Add Padding

Adding a padding value allows for adjusting the overall size of the Card widget.
To add a Padding:
    Select the Card from the widget tree or from the canvas area.
    Move to the Property Editor and navigate to the Padding section.
    Enter the desired value.
    Click on the Refresh icon
    to reset the values.
Use the
Lock button to change the Left, Top, Right, and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.

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.
Last modified 22d ago