How To Build Card Widget in Flutter?
The card is a built-in widget provided by Flutter that can be used to create visually appealing sections on your screen or parts of UI that look like actual cards. Cards in Flutter provide a Material design with various properties to play with and customize your widget such as elevation, border radius, child widget, and many more. Ready to elevate your app's design with Flutter cards? Let's dive into their properties, usage, and customization and see them in action through practical examples.
Flutter Card Properties
As we have seen earlier, Every element in Flutter is a widget and every widget has some set of properties that are used to customize the look and feel of your UI.
These properties are like configurations for your widgets. They tell Flutter how you want the certain widget to look when it is built and rendered on screen.
So, When working with any widgets, understanding properties and playing with them gives you the best results.
Now, Let us see some of the properties that come with Cards in Flutter:
| Property | Description |
|---|---|
| clipBehaviour | This property decides whether the content inside the Card will be clipped or not. |
| shadowColor | The property that is used to paint the shadow of a card. |
| elevation | is a property that gives the widget a shadow depth, meaning lifting it above the plain screen and making it stand out. |
| color | You can change it to any color and customize the look of the card by specifying a Color value using the color property. |
| shape | Property used to specify the shape of the card. |
| margin | This property takes in EdgeInsetsGeometry as the object to add space around the Card. |
| borderOnForeground | is a Boolean value that determines whether the card's border should be drawn before or after its child. By default, it is true. |
Example App
Let us build a sample app in Flutter that will have a Flutter Card widget.
In this app, we are gonna build a simple app and use the card widget in Flutter in the center of the page with customizations such as elevation, Image, and containing text too.
In our project directory, We have a folder named 'lib'.
Inside the lib folder, there is a file named 'main.dart'.
This is the file through which any Flutter application is called and executed. This is where we are gonna write the code today.
Let us see all the properties we have talked about in action:
The code is pretty self-explanatory as you glance through it and refer to the above-mentioned points.
We are using cards in a flutter in the center of the page and giving it an elevation of 10 to lift it from the surface making it more appealing.
As you can see, we also used and embedded many widgets inside the card widget too such as a text widget, sizedbox to add some space, a button, and even an image.
We have also embedded an image in the card which is an asset. In Flutter, You need to first add assets in the pubspec.yaml file to work with them.
You can also find the yaml file code snippet below the main.dart code which shows how you can add the assets
The result would look like this:
Conclusion
- Cards in Flutter is a useful widget for displaying content in a structured and visually appealing way.
- Flutter offers built-in Card widgets with customizable properties, including elevation, shape, and clipBehavior.
- Cards in Flutter can contain text, images, and other widgets, making them ideal for displaying a wide range of information.
- Cards in Flutter can be grouped, stacked, or arranged in a grid, providing developers with a variety of layout options.
- Cards in Flutter can be used in conjunction with other Flutter widgets, such as ListView, to create more complex and interactive user interfaces.