Create a rounded button button with border-radius in Flutter

0 votes

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

Mar 1, 2023 in Android by Ashwini
• 5,430 points
27,444 views

1 answer to this question.

0 votes

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.

answered Mar 1, 2023 by vishalini

Related Questions In Android

0 votes
1 answer

How do I disable a Button in Flutter?

To disable a button in Flutter, you ...READ MORE

answered Mar 10, 2023 in Android by vinayak
12,480 views
0 votes
1 answer

How to create number input field in Flutter?

Yes, Flutter has a built-in widget called ...READ MORE

answered Mar 1, 2023 in Android by vishalini
5,976 views
0 votes
1 answer

How to do Rounded Corners Image in Flutter?

To make the image in your Flutter ...READ MORE

answered Mar 1, 2023 in Android by vishalini
1,317 views
0 votes
1 answer

How to add a ListView to a Column in Flutter?

To add a ListView to a Column ...READ MORE

answered Mar 9, 2023 in Android by pooja
11,553 views
0 votes
1 answer

Flutter - Wrap text on overflow, like insert ellipsis or fade

Container( padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0), ...READ MORE

answered Mar 1, 2023 in Android by vishalini
1,082 views
0 votes
1 answer
0 votes
1 answer

Flutter Like Button Animation Not Working After Adding Method

It seems like the issue might be ...READ MORE

answered Apr 12, 2023 in Flutter by Tanishqa
• 1,170 points
738 views
0 votes
1 answer
0 votes
1 answer

How can I add a border to a widget in Flutter?

To add a border to a widget ...READ MORE

answered Mar 1, 2023 in Android by vishalini
9,406 views
0 votes
1 answer

Passing Data to a Stateful Widget in Flutter

The recommended way of passing data to ...READ MORE

answered Mar 18, 2023 in Android by pooja
15,398 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP