How To Change Flutter Elevated Button Border Radius

flutter elevated button border radius

In this Flutter post, we will change the Flutter elevated button border radius using practical Flutter example. We will discuss its customization step by step so you can have a proper knowledge of how to properly change border radius of Flutter elevated button.

After reading this post, I am sure you will be able to easily customize Flutter elevated button border radius in your own Flutter apps as well. So let’s just jump right into understanding how its practically done.

What is Flutter Elevated Button Border Radius?

It specified the shape of elevated button widget. It’s used to customize the border shape of button. Let’s now practically change the border shape of elevated button using multiple Flutter examples.

Default Flutter Elevated Button Shape

In order to see that, we have a define a simple Flutter elevated button. We will specify its required onPressed constructor and will pass a simple text widget to its child constructor. See below code:

ElevatedButton(
           onPressed: () {},
           child: Text('Default Elevated Button Border Radius'))
flutter elevated button default border radius
You can see that this is the default border radius of elevated button shows a little rounded edges.

Change Flutter Elevated Button Border Radius (Multiple Examples)

In order to change that, we have to use the style constructor of the elevated button class. Then passing ElevatedButton.styleFrom() to it and by using its shape constructor, we can easily change the Flutter elevated button border radius. Below are a list of multiple methods to do it.

Border Radius Circular

It is used to give each edge of the border a same value. See below code:

style: ElevatedButton.styleFrom(
                   shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(13)))
flutter elevated button circular border radius
You can use the copy with method to give some edges a different value. See below:
 shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(13).copyWith(topLeft: Radius.circular(0)))
flutter elevated button circular border radius

Border Radius Only

It enables you to give each edge a different value(can use same as well). See below code:

style: ElevatedButton.styleFrom(
                 shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.only(
                       topLeft: Radius.circular(10),
                       topRight: Radius.circular(4),
                       bottomLeft: Radius.circular(0),
                       bottomRight: Radius.circular(20))))
flutter elevated button border radius only
You can use copy with method here as well but its not preferred.

Border Radius Horizontal

It is used to give same border radius value to the left side(top left and bottom left) and same value to the ride side(top right and bottom right). See below code:

 shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.horizontal(
                        left: Radius.circular(20),
                        right: Radius.circular(10)))
flutter elevated button border radius horizontal
You can try using copy with method here as well to see what outcomes you get.

Border Radius Vertical

It is used to specify same value to the top corners(top left and top right) and same value to the bottom corners(bottom left and bottom right). See below code:

style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(
                        top: Radius.circular(20),
                        bottom: Radius.circular(10))))
flutter elevated button border radius vertical
So now you have a complete understanding of how to change Flutter elevated button border radius. I would love to answer if you still have any questions related to the customization of Flutter elevated button border radius.
Below is the complete source code in which Flutter elevated button border radius is implemented and customized.

Customized Flutter Elevated Button Border Radius Source Code

flutter elevated button border radius

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 10),
                    child: ElevatedButton(
                        onPressed: () {},
                        style: ElevatedButton.styleFrom(
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(10),
                                    topRight: Radius.circular(0),
                                    bottomLeft: Radius.circular(8),
                                    bottomRight: Radius.circular(5)))),
                        child:
                            Text('Custom Elevated Button Border Radius'))))));
  }
}

Conclusion

To conclude, hope you now have a complete in depth idea of how to use Flutter elevated button border radius. I would love to have your feedback on this post. I would highly encourage yo to visit my other posts as well. Thank you for reading.

Leave a Comment

Your email address will not be published. Required fields are marked *