Text Button in Flutter

Introduction

TextButton is a simple button that contains a text label and perform an action when pressed. This guide will help you understand the TextButton with the help of real-world examples.

Example 1: Default TextButton

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

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

Example 2: TextButton with Icon

In this example below, you will learn to create a TextButton with an icon and text label.

TextButton.icon(
  onPressed: () {},
  icon: Icon(Icons.info),
  label: Text('More Info'),
)

Example 3: Custom Color and TextStyle

In this example below, you will learn to create a TextButton with custom text color and style.

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    foregroundColor: Colors.black,
    backgroundColor: Colors.yellow, 
  ),
  child: Text('Custom Style'),
)

Example 4: TextButton with Underline

In this example below, you will learn to create a TextButton with underlined text.

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    textStyle: TextStyle(decoration: TextDecoration.underline),
  ),
  child: Text('Underlined Text'),
)

Example 5: Disabled TextButton

In this example below, you will learn to create a disabled TextButton.

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

Challenge

Design a TextButton that toggles its text color between two colors upon each press, illustrating a simple state change.