In this Flutter post, we will learn how to properly customize Flutter elevated button width. We will use multiple Flutter code examples for demonstration. First we will see the default width of Flutter elevated button, then we will change it using custom examples. Let’s get right into its implementation phase.
What is Flutter Elevated Button Width?
Flutter elevated button width is as the names suggests, it is the horizontal space that the elevated button covers. Let’s understand it with a practical example.
Default Flutter Elevated Button Width
In order to see the default width of Flutter elevated button, we have to define a simple elevated button with its required onPressed and child constructor. We will pass a text widget to its child constructor but we won’t pass a string to see the exact default width of the button. See below code:
ElevatedButton(onPressed: () {}, child: Text(''))
ElevatedButton(
onPressed: () {},
child: Text('Default Elevated Button Width'))
Custom Flutter Elevated Button Width
For that, we have to use the style constructor of Flutter elevated button class and pass ElevatedButton.styleFrom() to it.
Flutter Elevated Button Full Width
By using its minimum size constructor, we can easily set the full width of Flutter elevated button. See below code:
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
minimumSize: Size.fromHeight(50),
),
child: Text('Elevated Button Full Width'))
Flutter Elevated Button Fixed Width
To give some specific width to the elevated button, then just wrap it with Flutter sizedBox widget and set the width of that sizedBox. See below code:
SizedBox(
width: 300,
child: ElevatedButton(
onPressed: () {}, child: Text('Elevated Button Fixed Width')),
)
You can also set full width by passing double.infinity to the width constructor of Flutter sizedBox widget.
Customized Flutter Elevated Button Width 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: SizedBox(
height: double.infinity,
width: double.infinity,
child: Center(
child: SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {}, child: Text('Elevated Button Fixed Width')),
),
),
)));
}
}Conclusion
In conclusion, hopefully now have a complete understanding of how to practically customize Flutter elevated button width. I would love to have your valuable feedback on this Flutter post. Most importantly, I highly recommend you visit my other articles to know more about other amazing Flutter widgets and many more. Thank you for your time.
