How to Set Margin Inside Elevated Button in Flutter

In this post, we are going to show you how to set or change internal margin or padding on ElevatedButton. By default, the internal margin on content is pre-defined, you may need this method to reduce or increase the padding inside Elevated Button.

ElevatedButton(
  style: ElevatedButton.styleFrom(
      padding: EdgeInsets.all(50) 
      //internal content margin
  )
)

You can define padding value using the above method on ElevatedButton. Alternatively, you can use padding factors on the Child widget.

ElevatedButton(
  child: Padding(
      padding: EdgeInsets.all(30),
      child:Text("My Elevated Button 1")
  )
)

But, with this method, you cannot able to change the default padding value of the Elevated Button.

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("ElevatedButton Margin/Padding"),
            backgroundColor: Colors.redAccent,
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            child: Wrap(
                alignment: WrapAlignment.start,
                children: [
                  
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      padding: EdgeInsets.all(50) 
                      //internal content margin
                  ),
                  onPressed: (){

                  },
                  child: Text("My Elevated Button")
                ),

                Divider(),

                ElevatedButton(
                  onPressed: (){

                  },
                  child: Padding(
                      padding: EdgeInsets.all(30),
                      child:Text("My Elevated Button 1")
                  )
                )
                   
            ],)
          )
       );
  }
}