TextButton Class in Flutter Material Library with Examples

Text Button Class in flutter are material component button widgets with no border by default. It is just a regular button with some text written as the label. TextButton class is a replacement for the deprecated FlatButton class. It is undeprecated and performs all the functions of a FlatButton.  To use a TextButton, you need to import the material package library i.e.”package:flutter/material.dart“. It can be used for navigation, in toolbars, dialog boxes, etc. 

Constructor

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

Parameters

A TextButton in flutter comes with two major parameters:

1. child: this is the button’s label

 TextButton(
       
        child: const Text('Text Button'),
        
      ),

2. onPressed: this show’s the action to be performed on pressing the button

 TextButton(
         onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        child: const Text('Flat Button'),
      ),

Properties

• autofocus: gives a boolean value corresponding to the initial focus of the button.
• clipBehaviour: decides whether the content is clipped or not.
• focusNode: represents the focus node of the widget
• ButtonStyle style: decides the styling of the button
• onLongPress: the action to be executed when the button is long pressed by the user
• enabled: gives a boolean value for the activity of the button
• hashcode: decides the hashcode of the button
• Key: Controls how one widget replaces another widget in the tree.
• onFocusChanged: a method to be executed on changing the focus of the button
• onHover: actin to be executed when the user hovers the button
• runType Type: represents the runtime of an object
• enabled: tells whether the button is active or inactive

Methods

• createElement(): create a StatefulElement to manage the button’s location in the widget tree.
• createState(): Creates the mutable state for this widget at a given location in the tree.
• build(BuildContext context): Describes the part of the user interface
• createElement(): creates a StatelessElement to manage this widget’s location in the tree.
• debugDescribeChildren(): Returns a list of DiagnosticsNode objects describing this node’s children
• debugFillProperties(): Add additional properties associated with the node
• themeStyleOf(BuildContext context): returns the TextButtonThemeData.style of the closest TextButtonTheme ancestor.
• noSuchMethod(): Invoked when a non-existent method or property is accessed
• toDiagnosticsNode(): Returns a debug representation of the object that is used by debugging tools 
• toString(): A string representation of this object
• toStringDeep(): Returns a string representation of this node and its descendants.
• toStringShallow(): Returns a one-line detailed description of the object
• toStringShort(): A short, textual description of this widget.

Adding Colors to the Button

1. primary:

 TextButton(
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        child: const Text('Text Button'),
        style: TextButton.styleFrom(
            primary: Colors.green,
          
            textStyle:
                const TextStyle(fontSize: 24, fontStyle: FontStyle.italic)),
      ),

Output:

2. background:

TextButton(
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        child: const Text('Text Button'),
        style: TextButton.styleFrom(
            primary: Colors.white,
            backgroundColor: Colors.green,
            textStyle:
                const TextStyle(fontSize: 24, fontStyle: FontStyle.italic)),
      ),

Output:

Adding icon to the Button 

TextButton.icon(
                onPressed: () => Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => const NewScreen())),
                style: TextButton.styleFrom(
                    primary: Colors.white,
                    backgroundColor: Colors.green,
                    textStyle: const TextStyle(
                        fontSize: 24, fontStyle: FontStyle.normal)),
                icon: const Icon(Icons.login),
                label: const Text('Text Button 2'))

Output:

Changing the Shape of the Button

TextButton.icon(
                onPressed: () => Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => const NewScreen())),
                style: TextButton.styleFrom(
                    primary: Colors.white,
                    
                    // changing shape
                    shape: RoundedRectangleBorder(
                        borderRadius: new BorderRadius.circular(30.0)),                    
                        
                    backgroundColor: Colors.green,
                    textStyle: const TextStyle(
                        fontSize: 24, fontStyle: FontStyle.normal)),
                icon: const Icon(Icons.code),
                label: const Text('TextButton'))

Output:

Changing Elevation 

TextButton.icon(
              onPressed: () => Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const NewScreen())),
              style: TextButton.styleFrom(
                  primary: Colors.white,
                  
                  // setting elevation
                  elevation: 10,                     
                  
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0)),
                  backgroundColor: Colors.green,
                  textStyle: const TextStyle(
                      fontSize: 24, fontStyle: FontStyle.normal)),
              icon: const Icon(Icons.code),
              label: const Text('TextButton')),

Output:

Adding Padding 

 TextButton.icon(
              onPressed: () => Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const NewScreen())),
              style: TextButton.styleFrom(
                  primary: Colors.white,
                  elevation: 5,
                  
                  // adding padding 
                  padding: EdgeInsets.all(5), 
                  
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(10.0)),
                  backgroundColor: Colors.green,
                  textStyle: const TextStyle(
                      fontSize: 24, fontStyle: FontStyle.normal)),
              icon: const Icon(Icons.code),
              label: const Text('TextButton')),

Output:

Adding ShadowColor

TextButton.icon(
              onPressed: () => Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const NewScreen())),
              style: TextButton.styleFrom(
                  primary: Colors.white,
                  elevation: 5,
                  
                  // adjusting shadow color 
                  shadowColor: Colors.yellow,    
                  
                  padding: EdgeInsets.all(5),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(10.0)),
                  backgroundColor: Colors.green,
                  textStyle: const TextStyle(
                      fontSize: 24, fontStyle: FontStyle.normal)),
              icon: const Icon(Icons.code),
              label: const Text('TextButton')),

Output:

Let’s understand the above properties with an example

Example

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(HomeApp());
}

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

  @override
  State<HomeApp> createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Center(
          child: TextButton.icon(
              onPressed: () => Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const NewScreen())),
              style: TextButton.styleFrom(
                  primary: Colors.white,
                  elevation: 5,
                  shadowColor: Colors.yellow,
                  padding: EdgeInsets.all(5),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(10.0)),
                  backgroundColor: Colors.green,
                  textStyle: const TextStyle(
                      fontSize: 24, fontStyle: FontStyle.normal)),
              icon: const Icon(Icons.code),
              label: const Text('TextButton')),
        ),
      ),
    );
  }
}

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

  @override
  State<NewScreen> createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(child: Text('This is your new screen')),
    );
  }
}

Output: