How to set Padding for Elevated Button in Flutter

Padding is an important aspect that determines the clarity of your mobile app UI. In this Flutter tutorial, let’s check how to apply padding to the ElevatedButton widget.

You can set padding to elevated button using the Padding class. Make Padding widget parent to the elevated button.

Padding(
        padding: EdgeInsets.all(16.0),
          child: ElevatedButton(
                 child: Text('Elevated Button Padding'),
                  onPressed: () {
                    print('Pressed');
                  },
                ))

Following is the complete example.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Elevated Button Padding Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Elevated Button with Padding')),
        body: Container(
            child: Padding(
                padding: EdgeInsets.all(20.0),
                child: ElevatedButton(
                  child: Text('Elevated Button Padding'),
                  onPressed: () {
                    print('Pressed');
                  },
                  style: ElevatedButton.styleFrom(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(20.0),
                    ),
                  ),
                ))));
  }
}

See the output given below. You can see the padding around the button.

elevated button padding

You can also set Padding to the content of Elevated Button as given below.

ElevatedButton(
               child: Padding(
                      padding: EdgeInsets.all(20.0),
                      child: Text('Elevated Button Padding')),
               onPressed: () {
                  print('Pressed');
                  },
                )

I hope you understood how to apply padding to elevated button in Flutter.

Leave a Comment

Your email address will not be published. Required fields are marked *