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'))
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)))
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(13).copyWith(topLeft: Radius.circular(0)))
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))))
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)))
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))))
Customized Flutter Elevated Button Border Radius Source Code
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.
