3 min read

Buttons are essentials part of any application. It allows users to take action with a single tap such as saving data, opening a new page, etc. You will find the Button widget almost everywhere in the app. Sometimes you may need to create a rounded button in Flutter based on your branding/design of the app.

In this tutorial, we’ll introduce you to the top 3 ways and help you decide the best way to create a rounded button in your Flutter app.

We’ll cover the following with detailed explanations:

What is Rounded Button

The rounded button is a button that has a smooth curve at all corners. It is used to create an important action such as confirming an order or booking a ticket.

Here’s how it looks:

Rounded Button

Ways to Create a Rounded Button in Flutter

Let’s see different ways to create a Rounded Button.

1. Using GestureDetector

GestureDetector in Flutter is used to receive events such as onTap, onDoubleTap, onLongPress, etc which can be used to serve the purpose of a button. Inside the GestureDetector you can use the Container widget with a decoration to create rounded corners of a button.

Here’s the code to create a button with GestureDetector.

GestureDetector(
  onTap: () {},
  child: Container(
    width: 200,
    height: 50,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(50),
      color: Colors.greenAccent,
    ),
    child: Center(child: Text('GestureDetector Button')),
  ),
)

Here’s how it looks:

GestureDetector Button

But the problem of using the GesterDetector is that you won’t get the ripple effect when you click on it.

GestureDetector Button Problem

2. Using InkWell

InkWell in Flutter is a special widget that responds to touch events and hence can be used to create a Button. Buttons created with the InkWell widget also provide the ripple effect.

Here’s the code:

Material(
color: Colors.deepOrangeAccent,
  borderRadius: BorderRadius.circular(50),
  child: InkWell(
    onTap: () {},
    borderRadius: BorderRadius.circular(50),
    child: Container(
      width: 200,
      height: 50,
      alignment: Alignment.center,
      child: Text('InkWell Button',),
    ),
  ),
)

Here’s how it works:

InkWell rounded button

In the above visual, you can see the ripple effect is being produced when the button is clicked.

3. Using ElevatedButton (Best Way)

Using the ElevatedButton widget is the best way to create a rounded button in Flutter. ElevatedButton widget is a specialized widget for creating the buttons which automatically pick up the theme of your Flutter app. It has got a lot of customization options that can be used to achieve more in less code.

Here’s the code:

ElevatedButton(
  onPressed: () {
    debugPrint('ElevatedButton Clicked');
  },
  child: Text('ElevatedButton'),
  style: ElevatedButton.styleFrom(shape: StadiumBorder()),
)

Here’s how to looks:

Rounded Button in Flutter

Customizing

This section describes how to customize the Rounded button.

Controlling the rounded corners

If you need more control over the rounded corners of a button, you can use the following code snippet:

ElevatedButton(
  onPressed: () {
    debugPrint('ElevatedButton Clicked');
  },
  child: Text('ElevatedButton'),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
)

In the above code, you can replace the value inside BorderRadius.circular(10), with the value you would like to set.

Here’s how it looks:

Controlling rounded border of button

Adding Border

Here’s code to add a border to the rounded button:

ElevatedButton(
  onPressed: () {
    debugPrint('ElevatedButton Clicked');
  },
  child: Text('ElevatedButton'),
  style: ElevatedButton.styleFrom(
    shape: StadiumBorder(),
    side: BorderSide(color: Colors.red, width: 2),
  ),
)

Just adding the side parameter with appropriate values will do the job.

Here’s how it looks:

Rounded button with border

Conclusion

In this tutorial, we learned the top 3 ways to create a rounded button in your Flutter app with practical examples.

More Articles:

https://flutterbeads.com/easy-way-to-internationalize-and-localize-your-flutter-app/