How to create border radius of elevatedbutton in flutter

Question

I'm currently developing an Android app in Flutter. How can I add a rounded button?

Answer 1

To create a rounded button with border-radius in Flutter, you can use the ElevatedButton or TextButton widget and set its shape property to RoundedRectangleBorder with a BorderRadius parameter.

Here's an example using ElevatedButton:

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
),

Here's an example using TextButton:

TextButton(
  onPressed: () {},
  child: Text('Button'),
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
),

In both examples, the BorderRadius.circular(20) parameter sets the radius of the button corners to 20 pixels. You can adjust this value to get the desired level of roundness.

You can also customize other properties of the button, such as its color and text style, using the appropriate parameters in styleFrom() method.

To know more about Flutter, join our Flutter Certification Course today.