In Flutter, the TextButton widget is one of the most commonly used buttons that adheres to Material Design principles. Unlike the ElevatedButton and OutlinedButton, which have background colors and borders, the TextButton is typically used when you need a simple button with no background color or elevation, and only text or icons inside it.
What is a TextButton?
The TextButton is a simple button in Flutter that does not have any elevation or background color. It only displays the text or an icon and responds to user interaction. When the button is pressed, it typically shows a subtle visual feedback like changing the text color or applying a slight opacity.
This widget is best suited for situations where you want a flat, minimalist button, like text-based navigation, simple actions, or when you just need a link-style button.
Key Characteristics of TextButton:
Flat (no elevation or shadow).
Primarily text or icon-based.
Typically used in dialogs, form buttons, or as link-style buttons.
Can have custom styles like text color, padding, and more.
Properties of the TextButton Widget
Let’s dive into the most important properties of the TextButton widget.
1. onPressed
Type:
VoidCallback?Description: This property defines the function that gets called when the button is pressed. If set to
null, the button becomes disabled and doesn't respond to user interaction.
Example:
TextButton(
onPressed: () {
print("Button Pressed!");
},
child: Text("Click Me"),
);
2. onLongPress
Type:
VoidCallback?Description: This property triggers a callback when the user long presses the button. It’s optional and can be used to implement additional functionality like showing a tooltip or executing another action on a long press.
Example:
TextButton(
onPressed: () {
print("Button Pressed!");
},
onLongPress: () {
print("Button Long Pressed!");
},
child: Text("Press Me"),
);
3. style
Type:
ButtonStyle?Description: The
styleproperty allows you to customize the appearance of the button. You can set the button’s foreground color, padding, shape, and more. You can use theTextButton.styleFrom()method to easily configure the style.
Example:
TextButton(
onPressed: () {
print("Styled Button Pressed!");
},
style: TextButton.styleFrom(
primary: Colors.blue, // Text color
padding: EdgeInsets.all(16), // Padding inside the button
textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), // Text style
),
child: Text("Styled Button"),
);
Here, the primary property sets the text color, while textStyle allows you to adjust the font style.
4. autofocus
Type:
boolDescription: When set to
true, the button automatically gains focus when the widget is first built. This is particularly useful in forms or when dealing with keyboard navigation.
Example:
TextButton(
onPressed: () {
print("Button Pressed!");
},
autofocus: true,
child: Text("Autofocused Button"),
);
5. focusNode
Type:
FocusNode?Description: The
focusNodeallows you to manage the focus state of the button manually. It is useful when dealing with keyboard navigation or custom focus handling in forms.
Example:
FocusNode myFocusNode = FocusNode();
TextButton(
onPressed: () {
print("Button Pressed!");
},
focusNode: myFocusNode,
child: Text("Focused Button"),
);
6. clipBehavior
Type:
ClipDescription: This property determines how the button clips its content. It’s useful if the button's child widget exceeds the button's bounds. The
Clipenum has three options:Clip.none: No clipping.Clip.hardEdge: Clips the button’s child to the button’s bounds with a sharp edge.Clip.antiAlias: Clips the button’s child with anti-aliasing to smooth edges.
Example:
TextButton(
onPressed: () {
print("Button Pressed!");
},
clipBehavior: Clip.antiAlias, // Smooth clipping
child: Text("Clip Behavior Button"),
);
7. enabled
Type:
bool?Description: This property determines if the button is enabled or disabled. If
false, the button is visually disabled and doesn’t trigger theonPressedaction when clicked. Iftrue, the button behaves normally.
Example:
TextButton(
onPressed: null, // Disables the button
child: Text("Disabled Button"),
);
8. mouseCursor
Type:
MouseCursor?Description: This property defines the mouse cursor style when the user hovers over the button. You can use this property to change the cursor to a pointer when hovering over the button.
Example:
TextButton(
onPressed: () {
print("Button Pressed!");
},
mouseCursor: SystemMouseCursors.click, // Pointer cursor when hovered
child: Text("Mouse Cursor Button"),
);
9. focusColor
Type:
Color?Description: The color applied to the button when it is focused. This provides visual feedback that the button is in focus, which is important for accessibility and keyboard navigation.
Example:
TextButton(
onPressed: () {
print("Button Pressed!");
},
focusColor: Colors.green, // Color applied when the button is focused
child: Text("Focus Color Button"),
);
10. hoverColor
Type:
Color?Description: The color applied to the button when it is hovered over by a pointer (for web/desktop applications). This provides visual feedback to users that the button is interactive.
Example:
TextButton(
onPressed: () {
print("Button Pressed!");
},
hoverColor: Colors.grey[200], // Light gray color on hover
child: Text("Hover Color Button"),
);
11. visualDensity
Type:
VisualDensity?Description: This property adjusts the overall density of the button. It controls the amount of space around the button content.
VisualDensity.compactmakes the button more compact, whileVisualDensity.comfortablegives it more padding.
Example:
TextButton(
onPressed: () {
print("Button Pressed!");
},
visualDensity: VisualDensity.compact, // More compact button appearance
child: Text("Visual Density Button"),
);
12. disabledMouseCursor
Type:
MouseCursor?Description: Defines the mouse cursor style when the button is disabled. This can be used to show a "forbidden" cursor or another custom cursor when the button is inactive.
Example:
TextButton(
onPressed: null, // Disables the button
disabledMouseCursor: SystemMouseCursors.forbidden, // Forbidden cursor when disabled
child: Text("Disabled Mouse Cursor Button"),
);
Complete Example: Using TextButton with Multiple Properties
Here’s an example that demonstrates a TextButton with several properties combined:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("TextButton Example")),
body: Center(
child: TextButton(
onPressed: () {
print("Button Pressed!");
},
onLongPress: () {
print("Button Long Pressed!");
},
autofocus: true,
focusNode: FocusNode(),
focusColor: Colors.green,
hoverColor: Colors.grey[200],
style: TextButton.styleFrom(
primary: Colors.blue, // Text color
padding: EdgeInsets.all(16), // Padding
textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
child: Text("Click Me"),
),
),
),
);
}
}
Explanation of the Example:
onPressed: Prints a message when the button is pressed.
onLongPress: Prints a message when the button is long-pressed.
autofocus: The button is focused as soon as the screen loads.
focusColor: The button turns green when focused.
hoverColor: The button changes color when hovered (useful for web/desktop).
style: Customizes the text color, padding, and font style.
Conclusion
The TextButton widget in Flutter is a versatile and lightweight button that is perfect for scenarios where you need a flat, minimalist design. It can be easily customized using properties like onPressed, style, focusColor, hoverColor, and many others to make the button both functional and visually appealing.
Whether you're building forms, navigation buttons, or simple interactive links, the TextButton widget is an excellent choice for creating clean and responsive buttons.
Happy Coding!😀