How To Easily Customize Flutter Elevated Button Height – Top 2 Methods

In this Flutter post, we’ll learn how to customize Flutter elevated button height with 2 methods and using multiple examples for practical demonstration.

Everything about its customization will be discussed step by step in detail so you can have a better idea of how the height of elevated button can be customized.

So without further delay, let’s just get right into it.

Outline

1. What is Flutter Elevated Button Height?
2. Default Height of Flutter Elevated Button
3. Customizing Flutter Elevated Button Height (2 Easy Methods)
4. Using Padding Constructor
5. Using Flutter Sized Box Widget
6. Custom Flutter Elevated Button Height Complete Source Code
7. Conclusion

What is Flutter Elevated Button Height?

As the name suggests, its the vertical size of the Flutter elevated button. We will see multiple ways on how to customize its height. So let’s now dive right into its practical implementation.

Default Height of Flutter Elevated Button

In order to see the default height, we have to define a simple Flutter elevated button with its required onPressed and child constructor. We’ll pass an empty function to the onPressed, you can specify any action in its body. After that, we will pass an empty text widget to see the default height. See below code:

ElevatedButton(onPressed: () {}, child: Text(''))

Customizing Flutter Elevated Button Height (2 Easy Methods)

These two ways are listed below:

1. Using Padding Constructor
2. Using Flutter SizedBox Widget

Using Padding Constructor

We’ll be using the padding constructor to specify the height of elevated button. See below:

1. Edge In Sets Symmetric
2. Edge In Sets Only
3. Edge In Sets All

Edge In Sets Symmetric

It’s used to give vertical padding of the same value for both up and down direction. See below code:

ElevatedButton(
                onPressed: () {},
                    style: ElevatedButton.styleFrom(
                        padding:
                            EdgeInsets.symmetric(vertical: 30, horizontal: 10)),
                    child: Text('Custom Elevated Button'))

You can see that the height of Flutter elevated button is successfully customized. We have used the horizontal padding as well to give some width(left and right) to the elevated button.

You can use the copy with method if you want one side to have a different value. See below:

style: ElevatedButton.styleFrom(
                     padding:
                         EdgeInsets.symmetric(vertical: 30, horizontal: 10).copyWith(top: 50))

Edge In Sets Only

It is used to specify each side with different or same value. See below code:

style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.only(
                            top: 30, bottom: 30, right: 10, left: 10))

You can use copy with method here as well if you want, but its not recommended.

Edge In Sets All

It is used to give elevated button a padding of same value from all sides. See below code:

 style:
        ElevatedButton.styleFrom(padding: EdgeInsets.all(30))

You can use copy with method here to give one or more sides a different value.

Using Flutter Sized Box Widget

You can wrap the elevated button with the sizedBox widget and easily set the height and width of elevated button using the sizedBox constructors. See below code:

SizedBox(
      height: 100,
      child: ElevatedButton(
          onPressed: () {}, child: Text('Custom Elevated Button')),
    )

You can also set the width using its width constructor.

So this is how we can easily customize the Flutter elevated button height. Hope you like this post and now have a complete idea on how to practically change the height or width of Flutter elevated button widget.

Don’t hesitate to ask if you still have any questions regarding the customization of Flutter elevated button height. I’d be glad to answer them all.

Below section has the complete source code in which Flutter elevated button height is customized.

Custom Flutter Elevated Button Height Complete 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: ElevatedButton(
                    onPressed: () {},
                    style: ElevatedButton.styleFrom(
                        padding:
                            EdgeInsets.symmetric(vertical: 30, horizontal: 10)),
                    child: Text('Custom Elevated Button Height')))));
  }
}

Conclusion