TextButton Widget in Flutter

A TextButton widget is nothing more than a text label visible on a Material widget with no elevation.

It has no apparent borders by default and fills with a backdrop colour when touched.

FlatButton is no longer supported and should not be used in new projects; TextButton is the successor for this once-famous widget.

Note: TextButton requires Flutter 1.22.0 or newer to function properly without displaying obtrusive errors or warnings. The examples in this post have recently been modified to function properly with Flutter 3.3.10+.

TextButton Syntax

  Key? key, 
  required VoidCallback? onPressed, 
  VoidCallback? onLongPress, 
  ValueChanged<bool>? onHover, 
  ValueChanged<bool>? onFocusChange, 
  ButtonStyle? style, 
  FocusNode? focusNode, 
  bool autofocus = false, 
  Clip clipBehavior = Clip.none, 
  MaterialStatesController? statesController, 
  required Widget child

Simple Textbutton Implementation Example :

    onPressed: () {},
    child: const Text('Normal Button'),

Textbutton with Icon Example

    icon: const Icon(Icons.browse_gallery),
    label: const Text('Go To Gallery'),
    onPressed: () {},

Disable a TextButton Example

A non-responsive button is one that has been disabled. Simply set onPressed and onLongPress to null (onLongPress is null by default) to make a text button inactive.

        children: [
          const TextButton(
            onPressed: null, // For Disable Button you can set null
            child: Text('Check Disabled Button'),
            onPressed: () {}, // For Enable Button 
            child: const Text('Check Enabled Button'),
              onPressed: null, // For Disable Button you can set null
              icon: const Icon(Icons.cancel),
              label: const Text('Check Disabled Icon Button')),
              onPressed: () {}, // For Enable Button 
              icon: const Icon(Icons.pause),
              label: const Text('Check Enabled Icon Button'))

Style a TextButton Syntax

  Color? foregroundColor, 
  Color? backgroundColor, 
  Color? disabledForegroundColor, 
  Color? disabledBackgroundColor, 
  Color? shadowColor, 
  Color? surfaceTintColor, 
  double? elevation, 
  TextStyle? textStyle, 
  EdgeInsetsGeometry? padding, 
  Size? minimumSize, 
  Size? fixedSize, 
  Size? maximumSize, 
  BorderSide? side, 
  OutlinedBorder? shape, 
  MouseCursor? enabledMouseCursor, 
  MouseCursor? disabledMouseCursor, 
  VisualDensity? visualDensity, 
  MaterialTapTargetSize? tapTargetSize, 
  Duration? animationDuration, 
  bool? enableFeedback, 
  AlignmentGeometry? alignment, 
  InteractiveInkFeatureFactory? splashFactory, 
  Color? primary, 
  Color? onSurface

In the following example, an italic font button with an amber backdrop is created:

            onPressed: () {},
            style: TextButton.styleFrom(
                foregroundColor: Colors.green,
                backgroundColor: Colors.blue,
                    const TextStyle(fontSize: 24, fontStyle: FontStyle.bold)),
            child: const Text(
              'Main Button',

By utilising the fixedSize option in the following manner, you can size a TextButton precisely as you desire:

        style: TextButton.styleFrom(
            fixedSize: const Size(250, 100),
            backgroundColor: Colors.blue,
            foregroundColor: Colors.black,
            textStyle: const TextStyle(fontSize: 25)),
        onPressed: () {},
        child: const Text('Click'),

By changing its properties, you can alter the TextButton’s appearance. You may add an icon or alter the text style or colour of the button, for instance. Feel free to play around with various parameters to get the desired appearance and behaviour.

Related Posts

Creating a Snackbar in Flutter

StartActivityForResult in Flutter

Custom Tabbar in Flutter

Bottom Tab Bar in Flutter

Tabbar with image in flutter

Progress Bars Example in Flutter

TextButton Widget in Flutter
Scroll to top