Flutter ElevatedButton – Padding

Flutter ElevatedButton Padding

To set specific padding for ElevatedButton widget, set padding property of this ElevatedButton with required EdgeInsets value.

Syntax

ElevatedButton(
  child: const Text('Submit'),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    padding: const EdgeInsets.fromLTRB(20, 10, 20, 10)
  ),
),

Example

Flutter Application with three ElevatedButton widgets.

First button is set with padding of 10 for all the sides using EdgeInsets.all().

Second button is set with padding of 20 for all the sides using EdgeInsets.all().

First button is set with padding of 10 for top and bottom sides, and 20 for left and right sides using EdgeInsets.fromLTRB().

main.dart

import 'package:flutter/material.dart';

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

/// main application widget
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Application';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

/// stateful widget that the main application instantiates
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// private State class that goes with MyStatefulWidget
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            child: const Text('Submit'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.all(10)
            ),
          ),
          const SizedBox(height: 30,),
          ElevatedButton(
            child: const Text('Submit'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.all(20)
            ),
          ),
          const SizedBox(height: 30,),
          ElevatedButton(
            child: const Text('Submit'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.fromLTRB(20, 10, 20, 10)
            ),
          ),
        ],
      ),
    );
  }
}

Screenshot