Rounded Button in Flutter | Best Way (Code + Images)

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
• Ways to Create a Rounded Button in Flutter
  • Using GestureDetector
  • Using InkWell
  • Using ElevatedButton (Best Way)
• Customizing

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:

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:

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

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:

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

If you enjoy learning about creating rounded buttons in Flutter, you’ll definitely want to read our article on “Button with Icon and Text“. Explore how to combine icons and text in your buttons to create more engaging and intuitive user experiences.

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:

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:

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:

Conclusion

In conclusion, creating a rounded button in Flutter is a simple and effective way to enhance the visual appeal and user experience of your app. In this tutorial, we learned the top 3 ways to create a rounded button in your Flutter app with practical examples. With Flutter’s flexible and powerful widget system, you can create stunning rounded buttons that are both functional and aesthetically pleasing.

FAQs

How do you make a rounded button in Flutter?

1. To make a rounded button in Flutter, you can use the ElevatedButton or TextButton widgets and modify their shape property to create a rounded shape.
2. Set the shape property of the ElevatedButton to a RoundedRectangleBorder with a BorderRadius.circular value of 20, giving it a rounded shape. You can adjust the radius value to make the button more or less rounded as desired.
3. For example: ElevatedButton( onPressed: () {}, child: Text(‘Button’), style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20), ), ), ),

How do you give a round shape to an elevated button in Flutter?

To give a round shape to an ElevatedButton in Flutter, you can set its shape property to a CircleBorder or StadiumBorder with a circular radius value. CircleBorder. For example: ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: StadiumBorder(), ), ),

More Articles: