In this post, we will be see how we can change the Flutter RaisedButton shape using a proper and easy Flutter example. We will implement it step by step with proper explanation so you can have a clear practical knowledge of how to change Flutter RaisedButton shape.
What is Flutter RaisedButton Shape?
Flutter RaisedButton shape is as the name suggests, it is actually the border/edge shape of the Flutter RaisedButton. In this post, we will see what the default Flutter RaisedButton shape is and how to change it. So let’s not keep you waiting anymore and start implementing the customization of Flutter RaisedButton shape.
Default Flutter RaisedButton Shape
To see the default Flutter RaisedButton shape, we just have to define a simple Flutter RaisedButton widget. We will also give a child text widget to make the button looks good. See the below code:
RaisedButton(
onPressed: () {},
child: Text(
'Default Raised Button Shape',
),
)
Change Flutter RaisedButton Shape(Multiple Ways)
Now in order to change the default Flutter RaisedButton shape, we have to use the shape constructor of the Flutter RaisedButton class. We will pass the round rectangle border to the shape constructor. See the below code:
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10))
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10) .copyWith(topRight: Radius.circular(0))),
shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(0), topRight: Radius.circular(10), bottomLeft: Radius.circular(20), bottomRight: Radius.circular(30))),
Custom Flutter RaisedButton Design 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: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {},
color: Colors.purple,
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50).copyWith(
topRight: Radius.circular(0),
bottomRight: Radius.circular(0))),
child: Text(
'Custom Flutter Raised Button Shape',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.w500),
),
)
],
))),
));
}
}Conclusion
As a final point, you’ve developed a practical understanding of how to use and change the Flutter RaisedButton shape. I would like to receive your valuable feedback on this post. Please feel free to also browse through my other articles where I cover Flutter widgets, Flutter app development, Flutter animations, Flutter templates with free source code and many more. Thanks for reading this post.
