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)
),
),
)
),
),
);
}
More flutter tutorials
- flutter – Animated align
- flutter – Align example
- flutter – Align exact position
- flutter – Text decoration style
- flutter – How to change Text underline color
- flutter – How to change ElevatedButton color
- flutter – How to change ElevatedButton width
- flutter – How to change ElevatedButton disabled color
- flutter – How to disable ElevatedButton
- flutter – How to change ElevatedButton border radius
- flutter – How to create circular ElevatedButton
- flutter – TextButton splash color
- flutter – How to change TextButton size
- flutter – How to add padding to TextButton
- flutter – How to add a border to TextButton
Flutter Tutorials 