Outlined Button in Flutter

Introduction

OutlinedButton is a type of button in Flutter that displays a border around the button’s child. This guide will help you understand the OutlinedButton widget with the help of real-world examples.

Example 1: Simple OutlinedButton

In this example below, you will learn to create a simple button with text.

OutlinedButton(
  onPressed: () {},
  child: Text('Press Me'),
)

Example 2: OutlinedButton With Icon

In this example below, you will learn to create a button with an icon.

OutlinedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('Add Item'),
)

Example 3: Custom Border and TextStyle

In this example below, you will learn to create a button with custom border and text styles.

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    side: BorderSide(color: Colors.green, width: 2),
    textStyle: TextStyle(color: Colors.green, fontSize: 20),
  ),
  child: Text('Custom Style'),
)

Example 4: Rounded Corners OutlinedButton

In this example below, you will learn to create a button with rounded corners.

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
    ),
  ),
  child: Text('Rounded Corners'),
)

Example 5: Disabled OutlinedButton

In this example below, you will learn to create a disabled button using the OutlinedButton widget.

OutlinedButton(
  onPressed: null,
  child: Text('Disabled Button'),
)

Challenge

Create an OutlinedButton that changes the border color from blue to green when pressed.