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,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  })

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

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,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus,
    Clip clipBehavior,
    @required Widget icon,
    @required Widget label,
  }) 

Output:

 

 

Basic Usage

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

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

Output:

Flutter - OutlinedButton - Basic

 

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

Output:

Flutter - OutlinedButton - Icon

 

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:

Flutter - OutlinedButton - ThemeData Style

 

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:

Flutter - OutlinedButton - Style

 

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:

Flutter - OutlinedButton - Colors

 

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:

Flutter - OutlinedButton - Text Style

 

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:

Flutter - OutlinedButton - Shadow and Elevation

 

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:

Flutter - OutlinedButton - Border

 

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:

Flutter - OutlinedButton - Shape

 

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

  • Color primary,: Used to construct ButtonStyle.foregroundColor and ButtonStyle.overlayColor.
  • Color onSurface: Used to construct ButtonStyle.foregroundColor.
  • Color backgroundColor: The background color of the button.
  • Color shadowColor: The shadow color of the button's Material.
  • double elevation: The elevation of the button's Material.
  • 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.
  • BorderSide side:The color and weight of the button's outline.
  • OutlinedBorder shape: The shape of the button's underlying Material.
  • MouseCursor enabledMouseCursor: Defines the MouseCursor when the button is enabled. Used to construct ButtonStyle.mouseCursor.
  • MouseCursor disabledMouseCursor: Defines the MouseCursor when the button is disabled. Used to construct ButtonStyle.mouseCursor.
  • VisualDensity visualDensity: How compact the button's layout will be.
  • MaterialTapTargetSize tapTargetSize: The minimum size of area where the button may be pressed..
  • Duration animationDuration: The duration of animated changes for shape and elevation.
  • bool enableFeedback: Whether detected gestures should provide acoustic and/or haptic feedback..

OutlineButton Properties

  • 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.
  • ButtonStyle style: Defines the style for the button.
  • Clip clipBehavior: Defines how the content is clipped. Defaults to Clip.none.
  • FocusNode focusNode: Focus node of the widget.
  • bool autofocus: Whether this widget will be selected as initial focus. Defaults to false
  • Widget child *: The button's label.

*: required

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.