TextButton Widget

The TextButton widget in Flutter is a basic button that displays a text label on it. It can be customized with various properties, such as color, text style, padding, and onPressed action.

Here is a breakdown of the most important properties of the TextButton widget:

  • child: This is the text label displayed on the button. It can be a simple string or a complex widget.
  • onPressed: This property takes a callback function that is triggered when the button is pressed.
  • style: This property allows you to customize the appearance of the button, such as its background color, text color, and text style.
  • autofocus: If set to true, the button will be highlighted when the user navigates to it using the keyboard.
  • focusNode: This property is used to control the focus of the button.
  • clipBehavior: This property determines how the button’s background is clipped.

Here’s an example of a TextButton widget with some optional parameters:

TextButton(
  onPressed: () {
    // Action to perform when the button is pressed
  },
  child: Text(
    'Click me',
    style: TextStyle(fontSize: 18),
  ),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
    foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
    padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.symmetric(horizontal: 20, vertical: 10)),
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.blue)
        )
    )
  ),
)

In this example, we’ve set the background color to blue, the text color to white, the padding to 20 pixels horizontally and 10 pixels vertically, and the border radius to 18 pixels. When the button is pressed, the onPressed function will be called.

There are a few more important things to note about the TextButton widget:

  1. Style: The TextButton widget has various properties that can be used to style the text, including textStyle for setting the font size, color, and weight of the text, and the style property which can be used to set the overall button style.
  2. onPressed: The onPressed property is a callback function that gets called when the button is pressed. This is where you would typically add logic to perform some action when the button is clicked.
  3. Accessibility: The TextButton widget also includes several accessibility-related properties, such as autofocus, focusNode, and enableFeedback, which can help make your app more user-friendly for users with disabilities.
  4. Variants: There are also several variants of the TextButton widget, including IconButton, which displays an icon instead of text, and OutlinedButton, which displays a button with an outlined border.

Overall, the TextButton widget is a simple and versatile button widget that can be used for a variety of purposes in your Flutter app.

The TextButton widget was introduced in Flutter 2.0 as a replacement for the deprecated FlatButton widget. However, it is not a direct replacement for other buttons such as RaisedButton or OutlinedButton, as those have a different visual style and behavior. TextButton is simply a new addition to the Flutter button widget family, offering a different design option for developers.