Open In App

TextButton Class in Flutter Material Library with Examples

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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:

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:

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:

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:

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:

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:

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:



Last Updated : 09 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads