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
Scaffold class in Flutter with Examples
The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object ↳ Diagnosticable ↳ Diagnosticable Tree ↳ Widget ↳ StateFul Widget ↳ ScaffoldThe constructor of the
8 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
Flutter Material Widget - Outlined Button Class
Outlined Widgets are material design components that are used to give outlines to buttons. It is in no way different from text buttons except for the special feature of the border this class provides. These contain nonprimary actions for the apps. It is introduced in version 1.22 of flutter. Outline
4 min read
MaterialApp class in Flutter
MaterialApp Class: MaterialApp is a predefined class or widget in flutter. It is likely the main or core component of a flutter app. The MaterialApp widget provides a wrapper around other Material Widgets. We can access all the other components and widgets provided by Flutter SDK like Text widget, D
7 min read
Flutter - Future.delayed with Example
You can use the Future.delayed method in Flutter to delay the execution of a piece of code for a specified duration. A sample video is given below to get an idea about what we are going to do in this article. How to Use?Dart Future.delayed(Duration(seconds: 2), () { // code to be executed after 2 se
3 min read
How to Build a Simple Login App with Flutter?
To prevent unauthorized access to personal information, it is a good practice to authenticate users before granting access to websites, mobile applications, and computer applications after they can register and then log in. In this article, we are going to explain how to build a Design Login page us
8 min read