I am trying to give my ElevatedButton rounded corners to match my app's design language, but I can't find a borderRadius property directly on the widget. I’ve tried wrapping it in a ClipRRect, but that feels like a hack. Should I be using the styleFrom method or the ButtonStyle object to define a RoundedRectangleBorder? Also, how do I ensure the splash effect still follows the rounded shape once the border is applied?
3 answers
In modern Flutter, you should avoid wrapping buttons in ClipRRect. Instead, use the style property with ElevatedButton.styleFrom. Inside this method, you can define the shape attribute. You’ll want to pass a RoundedRectangleBorder and set its borderRadius property.
For example: shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)). This is the native way to do it, and it ensures that the elevation shadows and the ripple (splash) effect are correctly clipped to the new rounded shape. If you use ButtonStyle directly, it becomes much more verbose because you have to handle WidgetStateProperty, so styleFrom is definitely the preferred helper method for most UI tasks.
That works perfectly for a standard rounded button, but what if I want to create a "pill" shaped button where the sides are fully circular regardless of the button's width? Is there a way to make the radius dynamic, or do I just have to guess a very large number for the circular radius?
You can also define this globally in your ThemeData so you don't have to style every single button manually. Just set the elevatedButtonTheme in your main MaterialApp configuration.
I agree with Amanda. Setting it in the ThemeData is a lifesaver for maintaining consistency. I applied Brandon's original logic inside my ThemeData last week, and it instantly updated all 20+ buttons in my project to have consistent 12px rounded corners.
Kevin, for a pill shape, the best practice is to use StadiumBorder() instead of RoundedRectangleBorder. You simply set shape: const StadiumBorder() in your styleFrom method. This automatically calculates the maximum possible radius for the shorter side, creating that perfect pill look without you having to hardcode any specific pixel values.