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.
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:
- Using Padding Constructor
- Using Flutter SizedBox Widget
Using Padding Constructor
We’ll be using the padding constructor to specify the height of elevated button. See below:
- Edge In Sets Symmetric
- Edge In Sets Only
- 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'))

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

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

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

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'))))); } }