A text button is a Material widget label without elevation. We’ve discussed about elevated button in our previous post.
This short tutorial about TextButton will teach us about the nature of this button. In addition, we’ll know what are the primary differences between elevated button, outlined button and a text button.
Firstly, any button is basically a user input component and a child of material widget.
Secondly, in a flat layout we should think how we can decorate our text button. Otherwise the text button will not catch eyes.
We can use text buttons with other inline contents, however, we should differentiate that button with the help of padding so user can notice its presence.
Since a text button doesn’t have any visual border, we need to decorate it.
To get an idea, we must have a look at two buttons.
We’ve not decorated the first one, but decorated the second one, so that we can differentiate between them. Moreover, we’ll take a look at each code separately. In addition, one can get the full code snippet at this GitHub repository.
Let’s consider the first text button’s code. It’s a simple one. As we’ve told, we’ve not decorated it.
TextButton(
style: TextButton.styleFrom(
textStyle: const TextStyle(fontSize: 30),
),
onPressed: () {},
child: const Text('TextButton Simple'),
),Next, we’ll take a look at the second Text button which we’ve decorated with gradient.
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
padding: const EdgeInsets.all(15),
alignment: Alignment.center,
width: 350.00,
height: 350.00,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.red,
width: 2.0,
style: BorderStyle.solid,
),
borderRadius:
const BorderRadius.all(Radius.circular(40.0)),
gradient: const LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.blue,
Colors.yellow,
],
),
),
),
),
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.black,
textStyle: const TextStyle(fontSize: 30),
),
onPressed: () {},
child: const Text('TextButton Gradient'),
),
],
),
),It’s quite obvious that we’ve used different widgets to decorate our second text button. Otherwise we couldn’t have made its presence obvious in our bare eyes.
Subsequently, we’ll try to understand the difference between two text buttons.
The first text button takes the style including color from the defaultStyleOf. However, in the second one we have overridden that defaultStyleOf with our custom gradient style with its style parameter.
As a result, the second button reacts to touches by filling with the style‘s ButtonStyle.backgroundColor.
In the first case, the defaultStyleOf manages it.
Since a text button doesn’t come with great style and decoration, it’s good not to use it where it’ll blend with other content, such as in the middle of a list of items.
However, we can add great style from with the help of static styleFrom method. It’s a convenient way to create a text button ButtonStyle from simple values.
TextButton(
style: TextButton.styleFrom(
elevation: 40.0,
backgroundColor: Colors.yellow,
),
onPressed: () {},
child: Text(
'Press TextButton',
style: TextStyle(
fontFamily: 'Allison',
fontSize: 50,
color: Colors.black,
),
),
),As a result, we can greatly modify the style of our Text button’s appearance. Moreover, we can use our custom Google font Allison to give it extra edge over the other text buttons.
Consequently, there is no fear of blending with the inline text anymore. Our text buttons now visually attractive, and in addition, it makes its presence felt.
Let’s take a look at the appearance of the third text button, now.
To sum up, we’ve covered material design text buttons from different angles. And hopefully at the end, we have an idea of how we can use text buttons in different ways.
Leave a Reply