9.4 C
New York
Saturday, December 2, 2023

Working with OutlinedButton in Flutter (2022)

An OutlinedButton in Flutter is a labeled 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. Advertisements

Note: In order to use OutlinedButton without warnings or errors, you should upgrade Flutter to version 1.22.0 or newer. All code snippets you will see in this article were recently updated to work properly with the most recent versions of Flutter (2.8+).

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

AdvertisementsExample:

OutlinedButton(
    onPressed: () {},
    child: const 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
})
Advertisements

Example:

OutlinedButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.shopping_cart),
          label: const 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, 
  Size? maximumSize, 
  BorderSide? side, 
  OutlinedBorder? shape, 
  MouseCursor? enabledMouseCursor, 
  MouseCursor? disabledMouseCursor, 
  VisualDensity? visualDensity, 
  MaterialTapTargetSize? tapTargetSize, 
  Duration? animationDuration, 
  bool? enableFeedback, 
  AlignmentGeometry? alignment, 
  InteractiveInkFeatureFactory? splashFactory
})

Example:

OutlinedButton(
          onPressed: () {},
          child: const Text('Outlined Button'),
          style: OutlinedButton.styleFrom(
              primary: Colors.black,
              backgroundColor: Colors.amber,
              padding: const 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<Size?>? maximumSize, 
  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: const Text('Outlined Button'),
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.pink[100]),
              padding: MaterialStateProperty.all(
                  const EdgeInsets.symmetric(vertical: 20, horizontal: 50)),
              textStyle: MaterialStateProperty.all(
                  const TextStyle(fontSize: 24, fontStyle: FontStyle.italic))),
),
Advertisements

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: const Icon(Icons.shopping_cart),
          label: const 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: const Text('300 x 80'),
          onPressed: () {},
          style: OutlinedButton.styleFrom(
              fixedSize: const Size(300, 80),
              primary: Colors.deepPurple,
              backgroundColor: Colors.amberAccent,
              textStyle: const 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(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @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: const EdgeInsets.symmetric(
                        vertical: 10, horizontal: 30),
                    textStyle: const TextStyle(
                        fontSize: 24, fontStyle: FontStyle.italic)))),
        home: const HomePage());
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

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

Output:

Another Example

Advertisements

Screenshot:

The code with the explanations in the comments:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

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

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

References

Final Words

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 about Flutter by checking our Flutter category page or Dart category page.

Advertisements

Related Articles

Latest Articles