TextButton Class in Flutter Material Library with Examples
Last Updated :
04 May, 2025
Text Button Class in Flutter is a 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 of TextButton
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 of TextButton
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 shows 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 of TextButton
Property | Description |
|---|
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 | 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 | Acting to be executed when the user hovers over the button |
|---|
runType | Represents the runtime of an object |
|---|
enabled | Tells whether the button is active or inactive |
|---|
1. foregroundColor: It is the color of all items that are in TextButton.
Dart
TextButton(
onPressed: () {
Navigator.of(
context,
).push(MaterialPageRoute(builder: (context) => const NewScreen()));
},
child: Text('Text Button'),
style: TextButton.styleFrom(
foregroundColor: Colors.green,
textStyle: TextStyle(fontSize: 24, fontStyle: FontStyle.italic),
),
),
Output:
2. background: It is the background color of TextButton.
Dart
TextButton(
onPressed:() => Navigator.of(context,)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
child: const Text('Text Button'),
style: TextButton.styleFrom(
foregroundColor: Colors.white,
backgroundColor: Colors.green,
textStyle: const TextStyle(fontSize: 24, fontStyle: FontStyle.italic),
),
),
Output:
Dart
TextButton.icon(
onPressed:
() => Navigator.of(context,)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
style: TextButton.styleFrom(
foregroundColor: 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:
Dart
TextButton.icon(
onPressed:() => Navigator.of(context,)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
style: TextButton.styleFrom(
foregroundColor: 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
Dart
TextButton.icon(
onPressed:() => Navigator.of(context,)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
style: TextButton.styleFrom(
foregroundColor: Colors.white,
// setting elevation
elevation: 40,
shape: RoundedRectangleBorder(
borderRadius: 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
Dart
TextButton.icon(
onPressed:() => Navigator.of(context,)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
style: TextButton.styleFrom(
foregroundColor: 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
Dart
TextButton.icon(
onPressed:() => Navigator.of(context,)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
style: TextButton.styleFrom(
foregroundColor: Colors.white,
elevation: 5,
// adjusting shadow color
shadowColor: Colors.yellow,
padding: EdgeInsets.all(5),
shape: RoundedRectangleBorder(
borderRadius: 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
main.dart:
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,
foregroundColor: Colors.white,
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(
foregroundColor: 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,
foregroundColor: Colors.white,
title: const Text('New Screen'),
),
body: Center(child: Text('This is your new screen')),
);
}
}
Output:
Similar Reads
Raised Button Class in Flutter Material Library with Example Raised button class comes with a slight elevation in its structure on tapping by the user. They have several properties like text color, shape, padding, button color, etc. These are rectangular in shape by default which cannot be altered and have UI along their z-axis. It is a deprecated class, and
4 min read
FlatButton Class in Flutter Material Library with Example Flutter FlatButton Class has been officially deprecated and should not be used. We can use TextButton class instead to achieve the same results. In the example below we have code that uses the TextButton class to achieve the same results as that of its deprecated counterpart (i.e. FlatButton). FlatB
5 min read
FloatingActionButton Class in Flutter Material Library with Example The Floating Action Button is the most unique type of button widget provided in flutter. It is a widget that floats on the screen over other widgets. It appears as a circular icon on the screen with an icon in its center as its child. It is by default placed at the bottom-right corner of the screen.
4 min read
IconButton Class in Flutter with Example The most different button class provided in flutter is the IconButton Class. In this tutorial, we will walk you through the implementation and properties of the IconButton class for flutter in detail. An icon button allows users to take actions like searching, navigation, adding, etc, by simply pres
4 min read
Flutter - Loading Kit Widget with Example In every android application, you have seen the loading bars, which are used when something is loading such as loading data, loading the screen, and fetching the data. The same flutter gives you a widget Flutter loading kit. We simply use the widget and use it in our project. A sample video is given
2 min read