TextButton Class in Flutter Material Library with Examples
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 |
Adding Colors to the Button
1. foregroundColor: It is the color of all items that are in TextButton.
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.
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:
Add ing icon to the Button
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:
Changing the Shape of the Button
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
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
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
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:
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:
