Flutter Button Padding Tutorial

In Flutter, you can provide padding property to Button widget.

To provide padding to Button, assign the padding property with EdgeInsets object.

The following code snippet applies padding of 30 to all the four sides of the button.

padding: EdgeInsets.all(30),

To control the padding differently in the four directions, you can use EdgeInsets.fromLTRB() constructor.

//padding with left:5, top:25, right:50, bottom:10
padding: EdgeInsets.fromLTRB(5, 25, 50, 10)

You can also provide padding only on the specific sides of the Button widget using EdgeInsets.only() constructor.

//padding to only left and right
padding: EdgeInsets.only(left: 50, right:50),
//paddint to only top
padding: EdgeInsets.only(top: 20),

We shall look into examples for the above mentioned three scenarios.

Example 1: Padding to Button widget with same value for all sides

In this example, we display three Buttons, one button with default padding and the other buttons with modified padding.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyHomePage());

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tutorial - googleflutter.com'),
          ),
          body: Center(
              child: Column(children: <Widget>[
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button - Default Padding'),
                )),
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button - Padding 25'),
                  padding: EdgeInsets.all(25),
                )),
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button - Padding 50'),
                  padding: EdgeInsets.all(50),
                )),
          ])),
        ));
  }
}

Screenshot

Example 2: Padding to Button using EdgeInsets.fromLTRB()

In this example application, we shall display three buttons. The first is with default padding, so you can compare it with the rest. The other two buttons have different padding on their four sides.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyHomePage());

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tutorial - googleflutter.com'),
          ),
          body: Center(
              child: Column(children: <Widget>[
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button - Default Padding'),
                )),
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button'),
                  padding: EdgeInsets.fromLTRB(5, 25, 50, 10),
                )),
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button'),
                  padding: EdgeInsets.fromLTRB(10, 25, 10, 10),
                )),
          ])),
        ));
  }
}

Screenshot

Example 3: Padding to Button using EdgeInsets.only()

In this example application, we set padding to the only required sides using EdgeInsets.only() constructor as shown in the following code snippet.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyHomePage());

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Tutorial - googleflutter.com'),
          ),
          body: Center(
              child: Column(children: <Widget>[
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button - Default Padding'),
                )),
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button'),
                  padding: EdgeInsets.only(left: 50, right:50),
                )),
            Container(
                margin: EdgeInsets.all(5),
                child: RaisedButton(
                  onPressed: () {},
                  child: Text('Raised Button'),
                  padding: EdgeInsets.only(top: 20),
                )),
          ])),
        ));
  }
}

Screenshot

Summary

In this Flutter Tutorial, we learned how to provide padding to a Button using EdgeInsets class.