Buttons in an application add interactivity and functionalities to a static application. Buttons play a major role and so there type.

In this tutorial, we are going to learn to implement TextButton in Flutter. Also, we will learn to apply styles on the TextButton.

After the complete implementation, the application would look as follows:

Syntax: Create a TextButton as follows:

TextButton(
  onPressed: () {},
  child: const Text("Click Here"),
),

Explanation: The above two parameters are required. The child takes a widget and we can place any widget here. We have placed a Text widget. It differs from ElevatedButton as it does not have any background colour or elevation. The onPressed() function is the callback function.

Parameters

The other parameters are as follows:

• onLongPress()(void): This callback function is called when the button is pressed for a long time.

• onHover()(void): This callback function is called when the button is hovered over.

• onFocusChange()(void): This callback function is called when the focus changes from the current TextButton.

• style(ButtonStyle): This parameter takes the style of the button. We will learn to apply styles.

• focusNode(FocusNode): This parameter is used to set the focus node.

• autoFocus(bool): If set to true, the TextButton is focused on the mount. The default value is set to false.

• clipBehaviour(Clip): This is used to set the clipBehaviour.

Example: In the following example, we have a simple TextButton where we show a SnackBar when clicked.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AllAboutFlutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const ElevatedButtonTutorial(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextButton Tutorial'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.all(32.0),
              child: Text("All About Flutter"),
            ),
            TextButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text(
                      "Welcome to All About Flutter",
                    ),
                  ),
                );
              },
              child: const Text(
                "Click Here",
                style: TextStyle(
                  fontSize: 32.0,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output

Styling

We will learn to apply styles on the TextButton. The basic syntax is as follows:

TextButton(
  style: TextButton.styleFrom(),
  onPressed: () {},
  child: const Text(
    "Click Here",
  ),
),

To change the primary colour(here the colour of the Text widget will change since it is TextButton), we write as follows:

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.amber,
  ),
  onPressed: () {},
  child: const Text(
    "Click Here",
  ),
),

You can learn more about TextButton.styleFrom() here.

Example: In the following example, we have applied changed the size and added elevation to the TextButton.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AllAboutFlutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const ElevatedButtonTutorial(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextButton Tutorial'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Padding(
              padding: EdgeInsets.all(32.0),
              child: Text("All About Flutter"),
            ),
            TextButton(
              style: TextButton.styleFrom(
                primary: Colors.amber,
                elevation: 12.0,
              ),
              onPressed: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text(
                      "Welcome to All About Flutter",
                    ),
                  ),
                );
              },
              child: const Text(
                "Click Here",
                style: TextStyle(
                  fontSize: 32.0,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output