How to use OutlinedButton in Flutter

Last updated on April 7, 2021 A Goodman Loading... Post a comment

An OutlinedButton in Flutter is a label child displayed on a (zero elevation) Material widget that can reacts to touches by filling with a background color.

OutlinedButton is the replacement for OutlineButton which has been depreciated recently.

Note: In order to use OutlinedButton without warnings or errors, you should upgrade Flutter to version 1.22.0 or newer.

In this article, we’ll have a look at OutlinedButton’s constructors then go over how to style and disable an OutlinedButton, and examples of using OutlinedButton in Flutter.

Constructors

OutlinedButton:

OutlinedButton({
  Key key, 
  @required VoidCallback onPressed, 
  VoidCallback onLongPress, 
  ButtonStyle style, 
  FocusNode focusNode, 
  bool autofocus: false, 
  Clip clipBehavior: Clip.none, 
  @required Widget child
})

Example:

OutlinedButton(
            onPressed: () {},
            child: Text('Outlined Button'),
          ),

Output:

OutlinedButton.icon:

OutlinedButton.icon({
  Key key, 
  @required VoidCallback onPressed, 
  VoidCallback onLongPress, 
  ButtonStyle style, 
  FocusNode focusNode, 
  bool autofocus, 
  Clip clipBehavior, 
  @required Widget icon, 
  @required Widget label
})

Example:

OutlinedButton.icon(
            onPressed: () {},
            icon: Icon(Icons.shopping_cart),
            label: Text('Shopping Cart'),
          ),

Output:

How to style an OutlinedButton

You can style an OutlinedButton by using the OutlinedButton.styleFrom method or by using the ButtonStyle class.

Using OutlinedButton.styleFrom

Parameters:

styleFrom({
  Color primary, 
  Color onSurface, 
  Color backgroundColor, 
  Color shadowColor, 
  double elevation, 
  TextStyle textStyle, 
  EdgeInsetsGeometry padding, 
  Size minimumSize, 
  BorderSide side, 
  OutlinedBorder shape, 
  MouseCursor enabledMouseCursor, 
  MouseCursor disabledMouseCursor, 
  VisualDensity visualDensity, 
  MaterialTapTargetSize tapTargetSize, 
  Duration animationDuration, 
  bool enableFeedback
})

Example:

OutlinedButton(
            onPressed: () {},
            child: Text('Outlined Button'),
            style: OutlinedButton.styleFrom( 
              primary: Colors.black,
              backgroundColor: Colors.amber,
              padding: EdgeInsets.all(25)
            ),
          ),

Output:

using the ButtonStyle class

Constructors:

ButtonStyle({
  MaterialStateProperty<TextStyle> textStyle,
   MaterialStateProperty<Color> backgroundColor, 
  MaterialStateProperty<Color> foregroundColor, 
  MaterialStateProperty<Color> overlayColor, 
  MaterialStateProperty<Color> shadowColor, 
  MaterialStateProperty<double> elevation, 
  MaterialStateProperty<EdgeInsetsGeometry> padding, 
  MaterialStateProperty<Size> minimumSize, 
  MaterialStateProperty<BorderSide> side, 
  MaterialStateProperty<OutlinedBorder> shape, 
  MaterialStateProperty<MouseCursor> mouseCursor, 
  VisualDensity visualDensity, 
  MaterialTapTargetSize tapTargetSize, 
  Duration animationDuration, 
  bool enableFeedback
})

Example:

OutlinedButton(
            onPressed: () {},
            child: Text('Outlined Button'),
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.pink[100]),
                padding: MaterialStateProperty.all(
                    EdgeInsets.symmetric(vertical: 20, horizontal: 50)),
                textStyle: MaterialStateProperty.all(
                    TextStyle(fontSize: 24, fontStyle: FontStyle.italic))),
          ),

Output:

How to disable an OutlinedButton

An OutlinedButton is disabled and will not react to touches when both onPressed and onLongPress are equal to null. onLongPress is null by default so to disable an OutlinedButton, you just need to set onPressed to null.

Example:

OutlinedButton.icon(
            onPressed: null,
            icon: Icon(Icons.shopping_cart),
            label: Text('I am disabled'),
          ),

Output:

Another Example

Screenshot:

The code with the explanations in the comments:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter example'),
        backgroundColor: Colors.black,
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(children: [
          /////////////////
          /// Outlined Button #1
          OutlinedButton(
            onPressed: () {},
            child: Text('Button #1'),
          ),

          /// Outlined Button #2 with style property
         OutlinedButton(
          onPressed: () {},
          child: Text(
            'Button #2',
            style: TextStyle(color: Colors.white, fontSize: 30),
          ),
          style: OutlinedButton.styleFrom(
            padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
            elevation: 10,
            backgroundColor: Colors.orange,
          ),
        ),

          /// Disabled buttion
          OutlinedButton(onPressed: null, child: Text('I am disabled!'))
          ///////////////////
        ]),
      ),
    );
  }
}

Conclusion

In this tutorial, you have learned how to implement, style, and disable an OutlinedButton. Continue moving and keep the ball rolling by taking a look at the following articles:

You can also explore more tutorials and examples of Flutter by checking our Flutter category page or Dart category page.

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x