In this post, I will be explaining how to change Flutter RaisedButton size using a practical Flutter code example. A step by step explanation of how to customize Flutter RaisedButton size is necessary so you can have a complete and better understanding of how to practically implement the customization of Flutter RaisedButton size. So let’s not keep you waiting anymore and get right into the customization of Flutter RaisedButton size.
What is Flutter RaisedButton Size?
Flutter RaisedButton size is of course the size of the Flutter RaisedButton, means the height and width of Flutter RaisedButton. As there is no direct height and width constructor of the Flutter RaisedButton class so we will be using another way to still implement the customization of Flutter RaisedButton size. So let’s get right into changing the Flutter RaisedButton size.
Default Flutter RaisedButton Size
To see the default Flutter RaisedButton size, we have to define a simple Flutter RaisedButton widget. See the below code:
RaisedButton(
onPressed: () {},
child: Text(
'Default Button Size',
),
)
Change Flutter RaisedButton Size
In order to change the Flutter RaisedButton size, use the padding constructor of the Flutter RaisedButton class. For demonstration, I have passed edge in sets all and have given it a larger value so you can see the custom size of the Flutter RaisedButton. See the below code:
RaisedButton(
onPressed: () {},
padding: EdgeInsets.all(30),
child: Text(
'Custom Button Size',
),
)
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: () {},
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 20),
elevation: 15,
color: Colors.blue,
child: Text(
'Custom Raised Button Size',
style: TextStyle(
color: Colors.white,
),
))
],
))),
));
}
}Conclusion
In conclusion, you now know what Flutter RaisedButton size is and how to customize it. I would love to have your valuable feedback on this article. Please feel free to also visit my other posts in which I have covered topics related to Flutter widgets, Flutter app development, Flutter animations, Flutter templates and many more. Thanks for reading this post.
