OutlinedButton class

A Material Design "Outlined Button"; essentially a TextButton with an outlined border.

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but they aren’t the primary action in an app.

An outlined button is a label child displayed on a (zero elevation) Material widget. The label's Text and Icon widgets are displayed in the style's ButtonStyle.foregroundColor and the outline's weight and color are defined by ButtonStyle.side. The button reacts to touches by filling with the style's ButtonStyle.overlayColor.

The outlined button's default style is defined by defaultStyleOf. The style of this outline button can be overridden with its style parameter. The style of all text buttons in a subtree can be overridden with the OutlinedButtonTheme and the style of all of the outlined buttons in an app can be overridden with the Theme's ThemeData.outlinedButtonTheme property.

Unlike TextButton or ElevatedButton, outline buttons have a default ButtonStyle.side which defines the appearance of the outline. Because the default side is non-null, it unconditionally overrides the shape's OutlinedBorder.side. In other words, to specify an outlined button's shape and the appearance of its outline, both the ButtonStyle.shape and ButtonStyle.side properties must be specified.

Here is an example of a basic OutlinedButton.

To create a local project with this code sample, run:
flutter create --sample=material.OutlinedButton.1 mysample

The static styleFrom method is a convenient way to create a outlined button ButtonStyle from simple values.

See also:



OutlinedButton({Key? key, required VoidCallback? onPressed, VoidCallback? onLongPress, ValueChanged<bool>? onHover, ValueChanged<bool>? onFocusChange, ButtonStyle? style, FocusNode? focusNode, bool autofocus = false, Clip? clipBehavior, MaterialStatesController? statesController, required Widget? child, IconAlignment iconAlignment = IconAlignment.start})
Create an OutlinedButton.
OutlinedButton.icon({Key? key, required VoidCallback? onPressed, VoidCallback? onLongPress, ButtonStyle? style, FocusNode? focusNode, bool? autofocus, Clip? clipBehavior, MaterialStatesController? statesController, Widget? icon, required Widget label, IconAlignment iconAlignment = IconAlignment.start})
Create a text button from a pair of widgets that serve as the button's icon and label.


autofocus bool
True if this widget will be selected as the initial focus when no other node in its scope is currently focused.
child Widget?
Typically the button's label.
clipBehavior Clip?
The content will be clipped (or not) according to this option.
enabled bool
Whether the button is enabled or disabled.
no setterinherited
focusNode FocusNode?
An optional focus node to use as the focus node for this widget.
hashCode int
The hash code for this object.
no setterinherited
iconAlignment IconAlignment
Determines the alignment of the icon within the widgets such as:
isSemanticButton bool?
Determine whether this subtree represents a button.
key Key?
Controls how one widget replaces another widget in the tree.
onFocusChange ValueChanged<bool>?
Handler called when the focus changes.
onHover ValueChanged<bool>?
Called when a pointer enters or exits the button response area.
onLongPress VoidCallback?
Called when the button is long-pressed.
onPressed VoidCallback?
Called when the button is tapped or otherwise activated.
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
statesController MaterialStatesController?
Represents the interactive "state" of this widget in terms of a set of MaterialStates, like MaterialState.pressed and MaterialState.focused.
style ButtonStyle?
Customizes this button's appearance.


createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
createState() State<ButtonStyleButton>
Creates the mutable state for this widget at a given location in the tree.
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
defaultStyleOf(BuildContext context) ButtonStyle
Defines the button's default appearance.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
themeStyleOf(BuildContext context) ButtonStyle?
Returns the ButtonStyle that belongs to the button's component theme.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object.
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants.
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator.

Static Methods

styleFrom({Color? foregroundColor, Color? backgroundColor, Color? disabledForegroundColor, Color? disabledBackgroundColor, Color? shadowColor, Color? surfaceTintColor, Color? iconColor, Color? disabledIconColor, Color? overlayColor, double? elevation, TextStyle? textStyle, EdgeInsetsGeometry? padding, Size? minimumSize, Size? fixedSize, Size? maximumSize, BorderSide? side, OutlinedBorder? shape, MouseCursor? enabledMouseCursor, MouseCursor? disabledMouseCursor, VisualDensity? visualDensity, MaterialTapTargetSize? tapTargetSize, Duration? animationDuration, bool? enableFeedback, AlignmentGeometry? alignment, InteractiveInkFeatureFactory? splashFactory, ButtonLayerBuilder? backgroundBuilder, ButtonLayerBuilder? foregroundBuilder}) ButtonStyle
A static convenience method that constructs an outlined button ButtonStyle given simple values.