Flutter - TextButton Widget

Last Updated : 04 May, 2025

TextButton is a built-in widget in Flutter which derives its design from Google’s Material Design Library. It is a simple Button without any border that listens for onPressed and onLongPress gestures. It has a style property that accepts ButtonStyle as value, using this style property developers can customize the TextButton however they want.

The constructor of the TextButton Class

const TextButton({
    Key? key,
    required void Function()? onPressed,
    void Function()? onLongPress,
    void Function(bool)? onHover,
    void Function(bool)? onFocusChange,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    required Widget child,
})

Property	Description
onPressed	(required) This property takes a Function that returns void. That function will be invoked whenever the TextButton is pressed.
onLongPress	This property also takes a Function that returns void. That function will be invoked whenever the TextButton is long-pressed.
onHover	onHover property takes a void Function that takes a boolean value as its only parameter. The passed parameter is true if a pointer entered the button response area and is false when a pointer leaves the button response area.
onFocusChange	onFocusChange property also takes a void Function that takes a boolean value as its only parameter. The passed parameter is true if the button gains focus and is false if the button loses focus.
style	This optional property accepts ButtonStyle as an object. It is used for customizing the look of the TextButton.
focusNode	An optional focus node to use as the focus node for TextButton.
autofocus	Pass true if you want this widget as the initial focus when no other node in its scope is currently focused. The default value is false.
clipBehaviour	Accept the value of the type Clip enum. The default value is Clip.none.
child	(required) The child widget of TextButton Widget.

Example 1: In the example below, we used TextButton's onPressed property to launch the URL when we press the TextButton.

Dart

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gfg TextButton Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Gfg TextButton Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 35),
              child: Image.network(
                  "https://media.geeksforgeeks.org/wp-content/uploads/20220112153639/gfglogo-300x152.png"),
            ),
            TextButton(
              child: Text(
                "Visit GeeksforGeeks",
                style: TextStyle(fontSize: 25),
              ),
              onPressed: () async {
                const String _url = "https://www.geeksforgeeks.org";
                if (await canLaunch(_url)) {
                  launch(_url);
                } else {
                  throw "Could not launch $_url";
                }
              },
            )
          ],
        ),
      ),
    );
  }
}

Output:

Example 2: In this example, we used TextButton's style property to change the style of the text button.

Dart

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gfg TextButton Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String _buttonText = "Text Button";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Gfg TextButton Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 35),
              child: Image.network(
                  "https://media.geeksforgeeks.org/wp-content/uploads/20220112153639/gfglogo-300x152.png"),
            ),
            TextButton(
              child: Text(
                _buttonText,
                style: TextStyle(fontSize: 25),
              ),
              onPressed: () {},
              style: TextButton.styleFrom(
                  foregroundColor: Colors.red,
                  elevation: 2,
                  backgroundColor: Colors.amber),
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Flutter - RichText Widget

vpsop

Improve

Article Tags :

Flutter - TextButton Widget

The constructor of the TextButton Class

Properties of TextButton Widget

Similar Reads

Flutter - TextButton Widget

The constructor of the TextButton Class

Properties of TextButton Widget

Similar Reads

Thank You!

What kind of Experience do you want to share?