flutter - How to remove padding from ElevatedButton

Flutter - ElevatedButton Remove Padding

The ElevatedButton class represents a material design elevated button. The flutter developers can use elevated buttons to add dimension to otherwise mostly flat layouts such as in long busy lists of content, or in wide spaces. The flutter developers should avoid using elevated buttons on already-elevated content such as dialogs or cards. The flutter developers can override the ElevatedButton style with its style parameter. The static styleFrom() method is a convenient way to create an ElevatedButton ButtonStyle from simple values.

The following flutter application development tutorial will demonstrate how we can remove the padding from an ElevatedButton widget. That means how we can remove the padding from an ElevatedButton widget’s all sides. Here we will use the ElevatedButton class’s styleFrom() method to remove the padding from an ElevatedButton widget. Actually, we will set the ElevatedButton’s padding value to zero which seems ElevatedButton has no padding (padding removed).

The ElevatedButton class’s styleFrom() method is a static convenience method that constructs an elevated button ButtonStyle given simple values. By default, ElevatedButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can remove the padding from an ElevatedButton by passing a value (padding value zero for all sides) to the styleFrom() method’s padding parameter.

The styleFrom() method’s padding parameter value is an EdgeInsetsGeometry instance which adds padding to the ElevatedButton.

The EdgeInsetsGeometry class represents the base class for EdgeInsets that allows for text-direction-aware resolution.

The EdgeInsets class represents an immutable set of offsets in each of the four cardinal directions. The EdgeInsets class specifies offsets in terms of visual edges, left, top, right, and bottom.

The EdgeInsets.all(double value) constructor creates insets where all the offsets are the value. Here we used this constructor to set the padding value zero to an ElevatedButton widget’s all sides. That will practically remove the padding from an ElevatedButton widget’s all sides.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.indigo),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("ElevatedButton Remove Padding")
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: (){},
              child: const Text("Click Me"),
              style: ElevatedButton.styleFrom(
                padding: const EdgeInsets.all(0)
              ),
            ),
          )
      ),
    ),
  );
}