In this tutorial, we’ll learn how to properly implement Flutter raised button rounded corners by using practical Flutter code examples.
Introduction: Flutter Raised Button Rounded Corners
As the name suggests, it specifies the process of making the edges/corners of raised button circular. Let’s first see the default shape of corners. After that, we’ll make them circular using practical code examples.
Default Flutter Raised Button Corners Shape
For that, we’ve to implement a simple Flutter raised button widget with some background color, so the whole button is visible. See below code:
RaisedButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Text(
'Flutter Raised Button',
))
Above image shows the default corner shape of raised button.
Implementing Flutter Raised Button Rounded Corners (Multiple Examples)
In order to do that, we’ve to use the shape constructor of our Flutter raised button widget and pass it round rectangle border widget. This widget has a border radius constructor which can take different methods. See below list:
- BorderRadius.circular()
- BorderRadius.horizontal()
- BorderRadius.vertical()
- BorderRadius.only()
Border Radius Circular
If we want to make each and every edge of Flutter raised button circular and all of the same value, then we can use the below code:
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(13))
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(11).copyWith( bottomLeft: Radius.circular(6), topRight: Radius.circular(21)))
Border Radius Horizontal
If we want to give top right and bottom right edge a same value and top left and bottom left a same value, then use the below code:
shape: RoundedRectangleBorder( borderRadius: BorderRadius.horizontal( left: Radius.circular(21), right: Radius.circular(11)))
Border Radius Vertical
If you want to give top right and top left edge a same value and bottom right and bottom left edge a same value, then use the below code:
shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical( top: Radius.circular(11), bottom: Radius.circular(21)))
Border Radius Only
If we want to provide each edge of Flutter raised button with different/same value, then use the below code:
shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( topRight: Radius.circular(11), topLeft: Radius.circular(41), bottomLeft: Radius.circular(21), bottomRight: Radius.circular(3), ))
Flutter Raised Button Rounded Corners 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 StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: RaisedButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(41)),
child: Text(
'Flutter Raised Button',
)))));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement Flutter raised button rounded corners. I’d love to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
