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( 'w3wiki' ), ), 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: