A TextButton widget is nothing more than a text label visible on a Material widget with no elevation.
It has no apparent borders by default and fills with a backdrop colour when touched.
FlatButton is no longer supported and should not be used in new projects; TextButton is the successor for this once-famous widget.
Note: TextButton requires Flutter 1.22.0 or newer to function properly without displaying obtrusive errors or warnings. The examples in this post have recently been modified to function properly with Flutter 3.3.10+.
TextButton Syntax
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
})
Simple Textbutton Implementation Example :
TextButton(
onPressed: () {},
child: const Text('Normal Button'),
),
Textbutton with Icon Example
TextButton.icon(
icon: const Icon(Icons.browse_gallery),
label: const Text('Go To Gallery'),
onPressed: () {},
)
Disable a TextButton Example
A non-responsive button is one that has been disabled. Simply set onPressed and onLongPress to null (onLongPress is null by default) to make a text button inactive.
Column(
children: [
const TextButton(
onPressed: null, // For Disable Button you can set null
child: Text('Check Disabled Button'),
),
TextButton(
onPressed: () {}, // For Enable Button
child: const Text('Check Enabled Button'),
),
TextButton.icon(
onPressed: null, // For Disable Button you can set null
icon: const Icon(Icons.cancel),
label: const Text('Check Disabled Icon Button')),
TextButton.icon(
onPressed: () {}, // For Enable Button
icon: const Icon(Icons.pause),
label: const Text('Check Enabled Icon Button'))
],
),
Style a TextButton Syntax
styleFrom({
Color? foregroundColor,
Color? backgroundColor,
Color? disabledForegroundColor,
Color? disabledBackgroundColor,
Color? shadowColor,
Color? surfaceTintColor,
double? elevation,
TextStyle? textStyle,
EdgeInsetsGeometry? padding,
Size? minimumSize,
Size? fixedSize,
Size? maximumSize,
BorderSide? side,
OutlinedBorder? shape,
MouseCursor? enabledMouseCursor,
MouseCursor? disabledMouseCursor,
VisualDensity? visualDensity,
MaterialTapTargetSize? tapTargetSize,
Duration? animationDuration,
bool? enableFeedback,
AlignmentGeometry? alignment,
InteractiveInkFeatureFactory? splashFactory,
Color? primary,
Color? onSurface
})
In the following example, an italic font button with an amber backdrop is created:
TextButton(
onPressed: () {},
style: TextButton.styleFrom(
foregroundColor: Colors.green,
backgroundColor: Colors.blue,
textStyle:
const TextStyle(fontSize: 24, fontStyle: FontStyle.bold)),
child: const Text(
'Main Button',
),
),
By utilising the fixedSize option in the following manner, you can size a TextButton precisely as you desire:
TextButton(
style: TextButton.styleFrom(
fixedSize: const Size(250, 100),
backgroundColor: Colors.blue,
foregroundColor: Colors.black,
textStyle: const TextStyle(fontSize: 25)),
onPressed: () {},
child: const Text('Click'),
)
By changing its properties, you can alter the TextButton’s appearance. You may add an icon or alter the text style or colour of the button, for instance. Feel free to play around with various parameters to get the desired appearance and behaviour.
Related Posts
Creating a Snackbar in Flutter
StartActivityForResult in Flutter
Progress Bars Example in Flutter