Working with OutlinedButton in Flutter

Last updated on August 13, 2021 A Goodman Loading... Post a comment

An OutlinedButton in Flutter is a label child displayed on a (zero elevation) Material widget that can react 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 is much handier:

Parameters:

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

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<Size?>? fixedSize, 
  MaterialStateProperty<BorderSide?>? side, 
  MaterialStateProperty<OutlinedBorder?>? shape, 
  MaterialStateProperty<MouseCursor?>? mouseCursor, 
  VisualDensity? visualDensity, 
  MaterialTapTargetSize? tapTargetSize, 
  Duration? animationDuration, 
  bool? enableFeedback, 
  AlignmentGeometry? alignment, 
  InteractiveInkFeatureFactory? splashFactory
})

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:

Size (Width & Height)

We can control the size of an outlined button by using the fixedSize option of the styleFrom static method.

Example:

OutlinedButton(
          child: Text('300 x 80'),
          onPressed: () {},
          style: OutlinedButton.styleFrom(
              fixedSize: Size(300, 80),
              primary: Colors.deepPurple,
              backgroundColor: Colors.amberAccent,
              textStyle: TextStyle(fontSize: 24)),
        ),

Output:

Theme

Using OutlinedButtonTheme helps you set the default looks and behavior of multiple outlined buttons in your app.

Example:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Kindacode.com',
        theme: ThemeData(
            primarySwatch: Colors.green,
            outlinedButtonTheme: OutlinedButtonThemeData(
                style: OutlinedButton.styleFrom(
                    primary: Colors.red,
                    backgroundColor: Colors.purple[100],
                    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
                    textStyle:
                        TextStyle(fontSize: 24, fontStyle: FontStyle.italic)))),
        home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            OutlinedButton(onPressed: () {}, child: Text('Button 1')),
            SizedBox(
              height: 20,
            ),
            OutlinedButton.icon(
                onPressed: () {},
                icon: Icon(Icons.add),
                label: Text('Button 2'))
          ],
        ),
      ),
    );
  }
}

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.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles