How to Customize the Shape of an ElevatedButton in Flutter
Customize the Appearance of Your ElevatedButtons with the shape
Property
The ElevatedButton widget is a Material Design button that triggers an action. It has a raised appearance and can be customized with various properties, including its shape.
The default shape of an ElevatedButton is a rounded rectangle with a border radius of 8.0. However, you can customize the shape of the button by setting the shape
property of the ElevatedButton widget.
The shape
property can be set to a variety of different shapes, including:
RoundedRectangleBorder
BeveledRectangleBorder
CircleBorder
NotchedShape
ContinuousRectangleBorder
For example, the following code creates an ElevatedButton with a rounded border radius of 5.0:
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
),
onPressed: () {},
icon: const Icon(Icons.filter_list),
label: const Text(‘Filter’),
);
Want to learn more? Visit irawnewton for in-depth articles and guides on Flutter. I’ll keep posting blogs related to Flutter and related articles.
You can also use the shape
property to create custom shapes for your buttons. For example, the following code creates an ElevatedButton with a pill-shaped border:
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
shape: StadiumBorder(),
),
onPressed: () {},
icon: const Icon(Icons.filter_list),
label: const Text(‘Filter’),
);
The shape
property is a powerful way to customize the appearance of your ElevatedButtons. By using the different shapes available, you can create buttons that fit your specific needs and style.
Here are some additional tips for customizing the shape of an ElevatedButton:
- Use the
borderRadius
property to control the radius of the corners of the button. - Use the
side
property to set the border color and width of the button. - Use the
elevation
property to set the height of the button’s shadow. - Use the
padding
property to set the amount of padding around the button’s content.
For more information on customizing the shape
of an ElevatedButton, please see the ElevatedButton documentation: https://api.flutter.dev/flutter/material/ElevatedButton-class.html.
I hope this article helps you to customize the shape of your ElevatedButtons in Flutter.
If you have any queries feel free to comment. I’ll be more than happy to help you out.