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: