flutter - How to add padding to OutlinedButton

Flutter - OutlinedButton Padding

The OutlinedButton class represents a material design outlined button that is essentially a TextButton with an outlined border. The outlined buttons are medium-emphasis buttons. In a flutter application, the OutlinedButtons contain actions that are important, but they are not the primary action in an app. An OutlinedButton widget’s default style is defined by defaultStyleOf. The flutter application developers can override the OutlinedButton’s style with its style parameter. An OutlinedButton has a default ButtonStyle.side which defines the appearance of the outline. The flutter app developers can specify an OutlinedButton's shape and the appearance of its outline by specifying both the ButtonStyle.shape and ButtonStyle.side properties.

The following flutter application development tutorial will demonstrate how to add padding to an OutlinedButton widget. Here we will use the OutlinedButton class’s styleFrom() method to set the OutlinedButton’s padding. Here we will add padding to an OutlinedButton widget’s horizontal and vertical sides.

The OutlinedButton class’s styleFrom() method is a static convenience method that constructs an outlined button ButtonStyle given simple values. By default, OutlinedButton 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 add padding to the OutlinedButton by passing a value to the styleFrom() method’s padding parameter.

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

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.

The EdgeInsets.symmetric({double vertical = 0.0, double horizontal = 0.0}) constructor creates insets with symmetrical vertical and horizontal offsets. Here we used this constructor to add padding to an OutlinedButton widget’s horizontal and vertical sides.

So finally, the flutter app developers can add padding to the OutlinedButton widget by calling its styleFrom() static method and passing a value to the styeFrom() method’s padding parameter. They also have to call one of the EdgeInsets constructors to add padding to the OutlinedButton widget.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - OutlinedButton Padding")
          ),
          body: Center(
            child: OutlinedButton(
                onPressed: (){},
                child: const Text("Click Me"),
                style: OutlinedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 64, vertical: 32
                    )
                )
            ),
          )
      ),
    ),
  );
}