How to add Border Radius and make Circular Card in Flutter
Introduction
Flutter is an open-source mobile application development framework created by Google. It allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase. When it comes to designing user interfaces in Flutter, one of the key aspects is styling widgets. In this blog post, we will explore how to add a border radius to a card and make a circular card in Flutter.
Adding Border Radius to a Card
To add a border radius to a card in Flutter, you can use the ` RoundedRectangleBorder` or ` StadiumBorder` property. However, the simplest way to achieve this is by using the `shape` property of the `Card` widget and assigning it a `RoundedRectangleBorder` with a specified radius.
“`dart
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Container(
height: 200,
width: 200,
child: Center(
child: Text(‘Card with Border Radius’),
),
),
)
“`
Making a Circular Card
To make a circular card in Flutter, you can use the `CircleAvatar` or ` Container` widget with the `decoration` property. However, if you still want to use the `Card` widget, you can achieve this by using the `shape` property and assigning it a `CircleBorder`.
“`dart
Card(
shape: CircleBorder(),
child: Container(
height: 200,
width: 200,
child: Center(
child: Text(‘Circular Card’),
),
),
)
“`
Alternatively, you can use the `ClipOval` widget to make a circular card.
“`dart
ClipOval(
child: Container(
height: 200,
width: 200,
child: Card(
child: Center(
child: Text(‘Circular Card’),
),
),
),
)
“`
Conclusion
In conclusion, adding a border radius and making a circular card in Flutter can be achieved by using different properties and widgets. The `RoundedRectangleBorder` and `CircleBorder` can be used to add a border radius and make a circular card respectively.
FAQs
1. What is the use of Border Radius in Flutter?
The Border Radius in Flutter is used to add a rounded corner to a widget.
2. Can we use the RoundedRectangleBorder for all types of Borders?
No, we cannot use the `RoundedRectangleBorder` for all types of borders. We can use it only for rectangular borders.
3. How to make a Circular Card using Card widget?
We can make a circular card using the `Card` widget by using the `shape` property and assigning it a `CircleBorder`.
4. Can we use the CircleAvatar to make a Circular Card?
Yes, we can use the `CircleAvatar` to make a circular card, but it is used to display an image.
5. What is the difference between RoundedRectangleBorder and StadiumBorder?
The `RoundedRectangleBorder` and `StadiumBorder` are both used to add a border to a widget, but the `RoundedRectangleBorder` is used for rectangular borders and `StadiumBorder` is used for borders with semi-circular edges at the top and bottom.
