How To Easily Customize Flutter Elevated Button Width

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(''))

Let’s now pass it some text. See below:

ElevatedButton(
     onPressed: () {},
     child: Text('Default Elevated Button Width'))

flutter elevated button widget default width

You can see that the button’s width is changing with the child text widget. Let’s now see how to give that button its own full 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.

So this is how we can easily change Flutter elevated button width in multiple ways. Do ask if you still have questions regarding the customization of Flutter elevated button width. I’d be happy to answer all.

Below is the complete source code in which Flutter elevated button width is customized.

Customized Flutter Elevated Button Width Source Code

flutter elevated button fixed width

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.