What is the Flutter TextButton
In Flutter, the TextButton is a widget that allows you to display a button with text as its primary content. It is a simple button that can be customized using various attributes such as text, onPressed, style, etc.
The basic use of the TextButton in Flutter
The TextButton widget in Flutter allows you to create a button that displays text and can be pressed by the user to trigger an action.
This is a simple example of how to use a TextButton.
TextButton(
style: TextButton.styleFrom(
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
child: const Text('Enabled'),
),In this example, the TextButton widget has a style parameter that allows you to customize the appearance of the button. The style parameter takes a TextButton.styleFrom object, which allows you to specify various styling options such as the textStyle of the button’s text.
The onPressed parameter specifies a callback function that is executed when the button is pressed. In this case, the onPressed callback is an empty function that does not perform any actions.
The child parameter specifies the widget to display as the button’s child. In this case, the child is a Text widget that displays the text “Enabled”.
When the button is pressed, the onPressed callback function will be executed. You can add your own code to this callback function to specify the actions that should be performed when the button is pressed.
How to disable TextButton in Flutter
To disable a TextButton in Flutter, you can set the onPressed property to null : onPressed: null
TextButton(
style: TextButton.styleFrom(
textStyle: const TextStyle(fontSize: 20),
),
onPressed: null,
child: const Text('Disabled'),
),The style property is used to specify the style of the button, including the text style. In this case, the text style is set to a font size of 20.
The onPressed property is used to specify the callback function that is called when the button is pressed. In this case, the onPressed property is set to null, which means that the button is disabled and cannot be pressed.
Flutter TextButton with gradient and the border line
This code creates a custom TextButton in Flutter. The TextButton widget is a button that contains text and has a material design style. See the image’s bottom button.
Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 1.0,),
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: <Color>[
Color(0xFF0DA182),
Color(0xFF0A715C),
Color(0xFF12B876),
],
),
),
),
),
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
child: const Text('Gradient'),
),
],
),The code is wrapped in a Stack widget, which allows you to overlap multiple widgets on top of each other. In this case, there are two children in the Stack: a Positioned widget and the TextButton widget.
The Positioned widget is used to position the container that provides the background for the button. The child property of the Positioned widget is a Container widget that has a border and a gradient background.
The TextButton widget is used to create the button itself. The style property is used to specify the style of the button, including the padding and text style. The onPressed property is used to specify the callback function that is called when the button is pressed. In this case, the onPressed property is set to an empty function, which means that the button can be pressed but does not do anything when it is pressed. The child property is used to specify the widget that is displayed inside the button. In this case, the child property is set to a Text widget with the text “Gradient”.
You can read more about colour gradients in this post: How do you add a gradient background color in Flutter?
You can read more about Buttons in this post: Flutter Basics – Different types of Flutter Buttons
