How to Customize the Shape of an ElevatedButton in Flutter

Flutter Logo

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 borderRadiusproperty 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.