This tutorial contains examples of how to use TextButton
widget in Flutter. This includes the basic usage and how to customize the button.
Text Button is a Material Design's button that comes without border or elevation change by default. Therefore, it relies on the position relative to other widgets. It can also be used inside a Card widget or dialog and should be grouped in one of the bottom corners. In Flutter, this button can be created using TextButton
widget which was introduced in Flutter 1.22.
Using TextButton
You can create a TextButton
in Flutter by calling its constructor.
const 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,
MaterialStatesController? statesController
required Widget? child,
})
There are two required parameters. You have to pass a Widget
as child
, typically a Text
widget. The other required parameter is onPressed
, a callback which is called when the button is pressed.
Basic Usage
The most basic usage only requires you to pass the required parameters
TextButton(
child: Text('Woolha.com'),
onPressed: () {
print('Pressed');
}
)
Output:
Handling Long Press
To delect when the user does long press on the button, you can pass another callback function as onLongPress
.
TextButton(
child: Text('Woolha.com'),
onPressed: () {
print('Pressed');
},
onLongPress: () {
print('Long press');
},
)
For detecting other gesture types, you can use Flutter's GestureDetector
.
Setting Button Style
If you want to change the style of the button, what you have to do is creating a ButtonStyle
. The ButtonStyle
can be passed as ThemeData
's textButtonTheme
or TextButton
's style
.
To pass the ButtonStyle
as theme data, you have to create a TextButtonThemeData
with the ButtonStyle
passed as style
parameter in the constructor. Then, pass the TextButtonThemeData
as textButtonTheme
in the constructor of ThemeData
. Setting the style as theme data affects the style of all TextButton
widgets under the tree. Creating a ButtonStyle
for a TextButton
can be done using TextButton.styleFrom
.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Woolha.com Flutter Tutorial',
home: _TextButtonExample(),
theme: ThemeData(
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.purple,
),
),
),
);
}
}
class _TextButtonExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Woolha.com Flutter Tutorial'),
),
body: Center(
child: TextButton(
child: Text('Woolha.com'),
onPressed: () {
print('Pressed');
},
),
),
);
}
}
Output:
For defining a style for a specific button, you can pass ButtonStyle
as style
parameter in the constructor of TextButton
.
TextButton(
child: Text('Woolha.com'),
style: TextButton.styleFrom(
primary: Colors.teal,
),
onPressed: () {
print('Pressed');
},
)
Output:
You can pass ButtonStyle
as both ThemeData
's textButtonTheme
and TextButton
's style
parameters. Flutter will choose the most specific one which is the one defined as TextButton
's style
.
What customizations can be created using ButtonStyle
? Below are some of the examples.
Setting Colors
Values passed as the parameters of TextButton.styleFrom
are converted to construct the properties of ButtonStyle
. If you pass a Color
as primary
, it will be used to construct ButtonStyle
's foregroundColor
and overlayColor
. foregroundColor
is used for Text
and Icon
widgets inside the button, while overlayColor
is used to indicate that the button is focused, hovered, or pressed. The Color
passed as backgroundColor
and shadowColor
will be used as ButtonStyle
's backgroundColor
and shadowColor
respectively. You can also pass a Color
as onSurface
which will be used as ButtonStyle
's foregroundColor
when the button is disabled, with the opacity set to 0.38.
TextButton(
child: Text('Woolha.com'),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.teal,
onSurface: Colors.grey,
),
onPressed: () {
print('Pressed');
},
)
Output:
Setting Text Style
You can define a TextStyle
specific for the button and pass it as textStyle
. Passing color
in the constructor of TextStyle
may not affect the text color. As the solution, you can set the color of the text by passing primary
as the parameter of TextButton.styleFrom
, as shown in the previous example.
TextButton(
child: Text('Woolha.com'),
style: TextButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
textStyle: TextStyle(
color: Colors.black,
fontSize: 40,
fontStyle: FontStyle.italic
),
),
onPressed: () {
print('Pressed');
},
)
Output:
Setting Shadow and Elevation
To set the elevation of the button, you can pass elevation
parameter. When the elevation is not 0, you can set the color of the shadow by passing shadowColor
parameter.
TexButton(
child: Text('Woolha.com'),
style: TextButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
shadowColor: Colors.red,
elevation: 5,
),
onPressed: () {
print('Pressed');
},
)
Output:
Setting Border
It's possible to pass a BorderSide
as side
parameter which is used to set the border of the button. However, it's recommended to use OutlinedButton
if you want to have a button with border.
TextButton(
child: Text('Woolha.com'),
style: TextButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
side: BorderSide(color: Colors.red, width: 5),
),
onPressed: () {
print('Pressed');
},
)
Output:
Setting Shape
To change the shape of the button, pass OutlinedBorder
as shape
parameter. For example, you can pass a BeveledRectangleBorder
.
TextButton(
child: Text('Woolha.com'),
style: TextButton.styleFrom(
primary: Colors.teal,
onPrimary: Colors.white,
shape: const BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
),
onPressed: () {
print('Pressed');
},
)
Output:
Below is the list of named parameters you can pass to TextButton.styleFrom
static method.
Color? foregroundColor
: Foreground color when enabled.Color? backgroundColor
: Background color when enabled.Color? disabledForegroundColor
: Foreground color when disabled.Color? disabledBackgroundColor
: Background color when disabled.Color? shadowColor
: The shadow color of the button.Color? surfaceTintColor
: The color of the surface tint.Color? iconColor
: The color of the icon when enabled.Color? surfaceTintColor
: The color of the icon when disabled.double? elevation
: The elevation of the button.TextStyle? textStyle
: The style forText
widget.EdgeInsetsGeometry? padding
: The padding between the button's boundary and its child.Size? minimumSize
: The minimum size of the button.Size? fixedSize
: The size of the button.Size? maximumSize
: The maximum size of the button.BorderSide? side
: The outline of the button.OutlinedBorder? shape
: The shape of the button.MouseCursor? enabledMouseCursor
: The mouse cursor when enabled.MouseCursor? disabledMouseCursor
: The mouse cursor when disabled.VisualDensity? visualDensity
: How compact is the button's layout.MaterialTapTargetSize? tapTargetSize
: yyy.Duration? animationDuration
: The minimum size of the area within which the button can be pressed.bool? enableFeedback
: Whether to enable acoustic and/or haptic feedback.AlignmentGeometry? alignment
: The alignment of thechild
.InteractiveInkFeatureFactory? splashFactory
:InkWell
splash factory for showing ink splashes when tapped.
Using TextButton.icon
There is also a factory constructor TextButton.icon
that requires you to pass a widget as label
and another widget as icon
. The factory also requires onPressed
callback.
factory TextButton.icon({
Key? key,
required VoidCallback? onPressed,
VoidCallback? onLongPress,
ValueChanged<bool>? onHover,
ValueChanged<bool>? onFocusChange,
ButtonStyle? style,
FocusNode? focusNode,
bool? autofocus,
Clip? clipBehavior,
MaterialStatesController? statesController,
required Widget icon,
required Widget label,
})
Below is a basic example of using TextButton.icon
.
TextButton.icon(
label: Text('Woolha.com'),
icon: Icon(Icons.web),
onPressed: () {
print('Pressed');
}
)
Output:
TextButton
Parameters
Key? key
: The widget's key, used to control if it should be replaced.VoidCallback? onPressed
: The callback to be called when the button is tapped.VoidCallback? onLongPress
: The callback to be called when the button is long pressed.ValueChanged<bool>? onHover
: The callback to be called when a pointer enters or exists the button area.ValueChanged<bool>? onFocusChange
: The callback to be called when the focus changes.ButtonStyle? style
: Defines the style for the button.FocusNode? focusNode
: Focus node of the widget.bool autofocus
: Whether this widget will be selected as initial focus. Defaults tofalse
Clip clipBehavior
: Defines how the content is clipped. Defaults toClip.none
.MaterialStatesController? statesController
: Represents theMaterialState
of the widget.Widget? child
: The button content.
TextButton.icon
Parameters
Key? key
: The widget's key, used to control if it should be replaced.VoidCallback? onPressed
: The callback to be called when the button is tapped.VoidCallback? onLongPress
: The callback to be called when the button is long pressed.ValueChanged<bool>? onHover
: The callback to be called when a pointer enters or exists the button area.ValueChanged<bool>? onFocusChange
: The callback to be called when the focus changes.ButtonStyle? style
: Defines the style for the button.FocusNode? focusNode
: Focus node of the widget.bool autofocus
: Whether this widget will be selected as initial focus. Defaults tofalse
Clip clipBehavior
: Defines how the content is clipped. Defaults toClip.none
.MaterialStatesController? statesController
: Represents theMaterialState
of the widget.required Widget icon
: Widget to be set as the icon.required Widget label
: Widget to be set as the label.
You can also read about:
OutlinedButton
, a button with an outlined border.ElevatedButton
, a button whose elevation increases when being pressed by the user.FilledButton
, a button used for an important, final action.