Flutter TextButton Widget – Usage and Examples

In this tutorial, we will explore the Button widgets available in the Flutter. Compared to the previous version Flutter2, Flutter3 has updated the button widget. We will see how to use the TextButton widget and customize it. If you want to learn how to create your first flutter project, head over to this tutorial on making your first flutter project.

TextButtons, as the name suggests, are widgets with simple text that can be interacted with a click. It uses the theme “TextButtonTheme”. These buttons are useful for action in dialogs, snackbars and cards. The material design 3 specifications for the TextButton can be found in here.

TextButton without Icon

Constructor of the TextButton given below. The onPressed and child properties are mandatory.

TextButton({
    Key? key,
    required VoidCallback? onPressed, //onPressed is mandatory
    VoidCallback? onLongPress,
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    required Widget child,            //child is mandatory
})

Let’s see how we can use the button on a sample application.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: const Text('TextButton Example')),
          body: const TextButtonWidget()),
    );
  }
}

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

  //Button click handler: Show snackbar
  handleButtonClick(BuildContext context) {
    const snackBar = SnackBar(
      content: Text("Text Button Clicked!"),
    );
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      //Create Text Button
      child: TextButton(
        //Handle button press event
        onPressed: () {
          handleButtonClick(context);
        },
        //Contents of the button
        child: const Text("Click Text Button!")
      ),
    );
  }
}

Customize the TextButton

TextButton uses the theme TextButtonTheme. Let’s see how we apply the following style updates for the Button.

1. Change the font size to 20: Use textStyle
2. Make the button font bold: Use textStyle
3. Change the text color to RED: Use primary
4. Add padding of 20px on all sides: Use padding

@override
Widget build(BuildContext context) {
  return Center(
    //Create Text Button
    child: TextButton(
      //Handle button press event
        onPressed: () {
          handleButtonClick(context);
        },
        style: TextButton.styleFrom(
            //Change font size and weight
            textStyle: const TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
            //Set the foreground color
            primary: Colors.red,
            //Set the padding on all sides to 20px
            padding: const EdgeInsets.all(20.0),
        ),
        //Contents of the button
        child: const Text("Click Text Button!")),
  );
}

TextButton with Icon

Now, let’s see how we can create the TextButton with an icon. There is a special factory constructor available for creating TextButton with an Icon. Let’s have a look into the factory constructor.

factory TextButton.icon({
    Key? key,
    required VoidCallback? onPressed,  //onPressed is mandatory
    VoidCallback? onLongPress,
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool? autofocus,
    Clip? clipBehavior,
    required Widget icon,             //Icon is mandatory
    required Widget label,            //Label is mandatory
})

As it can be seen from the above constructor, we need to provide an icon, label and onPressed values.

Note: In the TextButton without icon constructor, we have used ‘child’ parameter for specifying the button label. In this factory constructor, child is not available, and we have to use label parameter.

Let’s see how we can do this with an example code.

@override
Widget build(BuildContext context) {
  return Center(
    //Create Text Button
    child: TextButton.icon(
        onPressed: () {
          handleButtonClick(context);
        },
        style: TextButton.styleFrom(
          //Change font size and weight
          textStyle: const TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
          //Set the foreground color
          primary: Colors.deepOrange,
          //Set the padding on all sides to 20px
          padding: const EdgeInsets.all(20.0),
        ),
        //Set the icon
        icon: const Icon(Icons.send_rounded),
        //Set the label
        label: const Text("Click Text Button!")),
  );
}

It generates the following output. As you can see, the icon is added to the button, the label is set and the customized styling is applying.

Conclusion

In this tutorial, we have learned how to use the TextButtons in flutter. We have seen how to use it, customize it, and add icons to it. If you liked this article, you might want to check out my other Flutter tutorials.