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
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: