Flutter - Using OutlinedButton Widget Examples

This is a tutorial about how to use Flutter's OutlinedButton widget, including how to customize the style of the button.

OutlinedButton is a widget that allows you to easily create a Material Design's Outlined Button. This widget was introduced in Flutter 1.22. It's similar to a TextButton, but with an outlined border. Usually, this kind of button is used for important but non-primary actions.

Using OutlinedButton

You can create an OutlinedButton in Flutter by calling its constructor.

  const OutlinedButton({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    MaterialStatesController? statesController
    required Widget? child,
  })

There are two required parameters. First, you need to pass a Widget as child, usually a Text widget. The other required parameter is onPressed, a callback to be called when the button is pressed.

Basic Usage

Below is a basic usage example which only passes the required parameters.

  OutlinedButton(
    child: Text('Woolha.com'),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

Handling Long Press

To detect when the user does long press on the button, you can pass another callback function as onLongPress.

  OutlinedButton(
    child: Text('Woolha.com'),
    onPressed: () {
      print('Pressed');
    },
    onLongPress: () {
      print('Long press');
    },
  )

You may also need to read about GestureDetector in Flutter in case you want to detect other type of gestures

 

Setting Button Style

To set the style of the button, you need to define a ButtonStyle. There are two ways to pass the ButtonStyle. First, you can set it as theme data. You need to create an OutlinedButtonThemeData and pass it as outlinedButtonTheme in the constructor of ThemeData. By setting the style as theme data, it affects all OutlinedButton widgets under the tree.

In the constructor of OutlinedButtonThemeData, you can pass a ButtonStyle as style parameter. For creating a ButtonStyle of OutlinedButton, use OutlinedButton.fromStyle.

The code below creates an application that defines a ButtonStyle for all of its OutlinedButton widgets.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _OutlinedButtonExample(),
        theme: ThemeData(
          outlinedButtonTheme: OutlinedButtonThemeData(
            style: OutlinedButton.styleFrom(primary: Colors.purple),
          ),
        ),
      );
    }
  }
  
  class _OutlinedButtonExample extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: OutlinedButton(
            child: Text('Woolha.com'),
            onPressed: () {
              print('Pressed');
            },
          ),
        ),
      );
    }
  }

Output:

 

If you want to define a style for a specific button, you can pass ButtonStyle as style parameter in the constructor of OutlinedButton.

  OutlinedButton(
    child: Text('Woolha.com'),
    style: OutlinedButton.styleFrom(
      primary: Colors.teal,
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

What if you define ButtonStyle on both ThemeData's outlinedButtonTheme and OutlinedButton's style. Flutter will choose the most specific style, which is the one defined as OutlinedButton's style.

The following examples show some customizations of OutlinedButton by defining ButtonStyle.

Setting Colors

There are some parameters for setting colors in the button. The first is backgroundColor. As the name suggests, it's used to set the background color of the button.

The second is primary. It's used to construct ButtonStyle's foregroundColor and overlayColor property. The foregroundColor is applied on the button's Text and Icon descendant widgets. The overlayColor is a color used to indicate that the button is focused, hovered, or pressed.

You can also pass another color as onSurface, which is used to construct ButtonStyle's foregroundColor property. The color is used when the button is disabled with the opacity set to 0.38.

  OutlinedButton(
    child: Text('Woolha.com'),
    style: OutlinedButton.styleFrom(
      primary: Colors.white,
      backgroundColor: Colors.teal,
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Setting Text Style

You can define a TextStyle specific for the button and pass it as textStyle. The color property of TextStyle may not affect the text color, but you can set the color of the text by passing primary as the parameter of OutlinedButton.styleFrom.

  OutlinedButton(
    child: Text('Woolha.com'),
    style: OutlinedButton.styleFrom(
      primary: Colors.teal,
      textStyle: TextStyle(
        color: Colors.black,
        fontSize: 40,
        fontStyle: FontStyle.italic
      ),
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Setting Shadow and Elevation

You can add shadow effect to the button by setting the color you want to use as shadowColor. In order for the shadow to be shown, you have to set the button's elevation to be greater than 0.

  OutlinedButton(
    child: Text('Woolha.com'),
    style: OutlinedButton.styleFrom(
      primary: Colors.white,
      backgroundColor: Colors.teal,
      shadowColor: Colors.red,
      elevation: 10,
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Setting Border

If you need to change the style of the border, you can create a customized BorderSide, then pass it as side parameter.

  OutlinedButton(
    child: Text('Woolha.com'),
    style: OutlinedButton.styleFrom(
      primary: Colors.white,
      backgroundColor: Colors.teal,
      side: BorderSide(color: Colors.red, width: 5),
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Setting Shape

If you want to change the shape of the button, you can pass an OutlinedBorder as shape parameter. The below example uses a RoundedRectangleBorder with a border radius of 10.

  OutlinedButton(
    child: Text('Woolha.com'),
    style: OutlinedButton.styleFrom(
      primary: Colors.white,
      backgroundColor: Colors.teal,
      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Below is the list of named parameters you can pass to OutlinedButton.styleFrom static method.

• Color? foregroundColor: Foreground color when enabled.
• Color? backgroundColor: Background color when enabled.
• Color? disabledForegroundColor: Foreground color when disabled.
• Color? disabledBackgroundColor: Background color when disabled.
• Color? shadowColor: The shadow color of the button.
• Color? surfaceTintColor: The color of the surface tint.
• double? elevation: The elevation of the button.
• TextStyle? textStyle: The style for Text widget.
• EdgeInsetsGeometry? padding: The padding between the button's boundary and its child.
• Size? minimumSize: The minimum size of the button.
• Size? fixedSize: The size of the button.
• Size? maximumSize: The maximum size of the button.
• BorderSide? side: The outline of the button.
• OutlinedBorder? shape: The shape of the button.
• MouseCursor? enabledMouseCursor: The mouse cursor when enabled.
• MouseCursor? disabledMouseCursor: The mouse cursor when disabled.
• VisualDensity? visualDensity: How compact is the button's layout.
• MaterialTapTargetSize? tapTargetSize: yyy.
• Duration? animationDuration: The minimum size of the area within which the button can be pressed.
• bool? enableFeedback: Whether to enable acoustic and/or haptic feedback.
• AlignmentGeometry? alignment: The alignment of the child.
• InteractiveInkFeatureFactory? splashFactory: InkWell splash factory for showing ink splashes when tapped.

Using OutlinedButton.icon

If the outlined button contains Icon and Text, it can be created using OutlinedButton.icon in which you need to pass a Widget as icon and another one as label instead of passing a Widget as child..

  factory OutlinedButton.icon({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool? autofocus,
    Clip? clipBehavior,
    MaterialStatesController? statesController,
    required Widget icon,
    required Widget label,
  }) 

Below is the usage example.

  OutlinedButton.icon(
    label: Text('Woolha.com'),
    icon: Icon(Icons.web),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

OutlinedButton Parameters

• Key? key: The widget's key, used to control if it should be replaced.
• VoidCallback? onPressed: The callback to be called when the button is tapped.
• VoidCallback? onLongPress: The callback to be called when the button is long pressed.
• ValueChanged<bool>? onHover: The callback to be called when a pointer enters or exists the button area.
• ValueChanged<bool>? onFocusChange: The callback to be called when the focus changes.
• ButtonStyle? style: Defines the style for the button.
• FocusNode? focusNode: Focus node of the widget.
• bool autofocus: Whether this widget will be selected as initial focus. Defaults to false
• Clip clipBehavior: Defines how the content is clipped. Defaults to Clip.none.
• MaterialStatesController? statesController: Represents the MaterialState of the widget.
• Widget? child: The button content.

OutlinedButton.icon Parameters

• Key? key: The widget's key, used to control if it should be replaced.
• VoidCallback? onPressed: The callback to be called when the button is tapped.
• VoidCallback? onLongPress: The callback to be called when the button is long pressed.
• ValueChanged<bool>? onHover: The callback to be called when a pointer enters or exists the button area.
• ValueChanged<bool>? onFocusChange: The callback to be called when the focus changes.
• ButtonStyle? style: Defines the style for the button.
• FocusNode? focusNode: Focus node of the widget.
• bool autofocus: Whether this widget will be selected as initial focus. Defaults to false
• Clip clipBehavior: Defines how the content is clipped. Defaults to Clip.none.
• MaterialStatesController? statesController: Represents the MaterialState of the widget.
• required Widget icon: Widget to be set as the icon.
• required Widget label: Widget to be set as the label.

You can also read about:

• ElevatedButton, a button whose elevation increases when being pressed by the user.
• TextButton, a standard button without outlined border and elevation change.
• FilledButton, a button used for an important, final action.