Flutter UI Essentials — Cards

Cards? We use card views on almost every mobile app. Using attractive cards to display the content and actions of a single subject is very common in mobile development. Material 3 design gives new colors and looks to a Card component.

When we use the contents of a single item or subject, it’s easy for our users to read the content.

I will show you the usage of a Flutter Card widget with the latest material design.

Material card

• Use cards to contain contents such as images, headlines, supporting text, lists and action buttons.
• They can also contain other components
• Available in three types: elevated, filled, outlined
• Cards can have flexible layouts and dimensions depending on their contents.

Differences in M3

Color: New color mappings and compatibility with dynamic color

Elevation: Lower elevation and no shadow by default

Types: Three official card types — elevated, filled, and outlined

We can also use a card as an entry point to navigate to another screen with a selected gesture. Cards can also be displayed in a grid, vertical list, or carousel.