0
0
FlutterConceptBeginner · 3 min read

What is TextButton in Flutter: Simple Explanation and Example

TextButton in Flutter is a simple button widget that displays text and reacts to taps by triggering an action. It is used to create buttons without borders or background color by default, making it ideal for inline or subtle clickable text.
⚙️

How It Works

TextButton works like a clickable label that responds when you tap it. Imagine a button that looks like plain text but still acts like a button. When you press it, it can run some code, like opening a new screen or showing a message.

It is built to be simple and clean, without extra decoration like borders or shadows. This makes it perfect for places where you want a button that doesn’t stand out too much, like links in a paragraph or simple actions in a toolbar.

💻

Example

This example shows a TextButton that prints a message when tapped.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('TextButton Example')),
        body: Center(
          child: TextButton(
            onPressed: () {
              print('TextButton pressed');
            },
            child: const Text('Press Me'),
          ),
        ),
      ),
    );
  }
}
Output
A screen with an app bar titled 'TextButton Example' and a centered text button labeled 'Press Me'. When tapped, 'TextButton pressed' is printed in the console.
🎯

When to Use

Use TextButton when you want a simple, clean button that looks like text. It is great for actions that are less prominent, such as:

  • Links inside paragraphs or dialogs
  • Toolbar or app bar actions
  • Secondary actions where you don’t want a heavy button style

It helps keep the interface light and uncluttered while still providing interactive elements.

Key Points

  • TextButton shows text that acts like a button.
  • It has no border or background by default.
  • Use it for subtle or inline clickable text.
  • It triggers an action when tapped.

Key Takeaways

TextButton is a simple text-only button widget in Flutter.
It is best for subtle actions or inline clickable text.
It triggers code when tapped but has no default border or background.
Use it to keep your UI clean and minimal for secondary actions.