Flutter — Know Updated Material Button — TextButton
In previous articles, we have gone through basic as well as styling details of updated flutter material button named ElevatedButton
and OutlinedButton
. If still you haven’t check them do check it here and here respectively.
In this article we’ll be going through details of TextButton
which is replacement of FlatButton
. So, let’s check it out.
Basic Information
A TextButton
widget is used to display a clickable text without any elevation or any outline boarder as ElevatedButton
and OutlinedButton
respectively. It simply displays a text or widget tree component provided to it’s parameter named child
. Along with this parameter other one named onPressed
is also a required parameter to get TextButton
in action. To enable touch on button onPressed should be assigned a method callback. If it gets null then button will be stays in disable state.
Let’s assign some valued to both of these parameters and see how a TextButton
will get displayed.
Here, we’ve provided values of both required parameters hence button will be displayed as in active state. If we failed to provide value of onPressed
parameter or pass null equals to it, button will be displayed as inactive button like in disable state.
In active state, TextButton
will react on touches by filling color specified by ButtonStyle.overlayColor
parameter of ButtonStyle
class. Same as onPressed we can also specify onLongPress
method to handle long press for TextButton to perform some specific actions.
TextButton Styling
Older button widget FlatButton
was having different parameters directly under itself to give different styles to button being displayed. Newer one, TextButton
applies different styling to button with the help of parameter named style
which accept value of a ButtonStyle
class. So let’s go over with each of these style parameter one by one.
textStyle
: Use this parameter to give a specific TextStyle
to all text being displayed descendants to TextButton
using child
parameter.
backgroundColor
: Specify button’s background color being displayed with any color.
foregroundColor
: Specify color for button’s foreground items like Text
& Icon
being displayed as child descendants.
With this overridden values of background and foreground color, button will be displayed as displayed below.
Seems like ElevatedButton
without elevation or OutlinedButton
with overridden border width as well as background color. Cool, right! Yes but the purpose we’re using TextButton
is where we do have to provide on press functionality for text being displayed on the screen.
Next, as we touch or perform long press on TextButton
, ripple will be displayed with primary color specified for our application. To override this color, we can pass a color value to overlayColor
parameter of ButtonStyle
.
After this a touch or a long press on TextButton
will display ripple with given color as displayed below.
More to these color changes, we can also override shadow color being displayed for TextButton
. To do that provide color value to shadowColor
parameter. Giving only a value to this will not change anything, to take it in effect provide value to elevation
parameter also. With only positive elevated value button shadow will be displayed with customized color value.
With these values, it is hard to figure out widget being used to display this view.
Next parameter is padding
, used to provide padding between button boundary & content being displayed on it (using child
parameter).
To get it visually clear, all previous provided color styles has been removed and background color value is given with opacity 0.003.
From above image, it’s clearly visible how a TextButton
will take space with provided values to padding
parameter.
Next parameter is side
& from the name of it, we can get clear idea what it does. To display an outline border on edges of TextButton
we can pass a BorderSide
class value to this parameter. BorderSide
will give access to three different parameters named color
, width
& style
.
Specifying color value for parameter color
will take effect on outline color being displayed on TextButton
. Double value to parameter width
will update button’s outline width. Last one, style
accepts one of two values BorderStyle.none
& BorderStyle.solid
. First one will remove outline being displayed around button & later one keep the effect as it is like style
parameter is not defined.
Seems like OutlinedButton
being display on the screen, right! This is the beauty of Flutter.
Last, same as other material buttons we do have shape
parameter from ButtonStyle
class which gives different shape styles to TextButton
. This parameter accepts different values of OutlineBorder
class and gives good border shapes to the button. Let’s check them one by one.
RoundedRectangleBoarder
shape
This will give shape of Rectangle with rounded corners to the TextButton.
RoundedRectangleBorder
shapeContinuousRectangleBoarder
shape
ContinuousRectangleBoarder
shapeSame as previous one but not with steep rounded corners.
TextButton
— View with ContinuousRectangleBoarder
shapeBeveledRectangleBoarder
shape
Giving this value, it will give nice looking shape with boarders being sliced diagonally with value being passed.
BeveledRectangleBoarder
shapeCircleBorder
shape
CircleBoarder
shapeGiving this shape will form TextButton
to be displayed as a circular shape button. With this shape value we need to give short value of label being displayed on the button to give better UI or else it will go beyond circular shape of the button.
CircleBoarder
shapeSo this is all basic and styling details for updated material button named TextButton
in flutter framework. Read more about this button in official doc here.
For this we’re completing series of 3 articles for detailing ElevatedButton, OutlinedButton and TextButton. Stay tuned for more articles in upcoming days. If you haven’t read them yet links have been already hyperlinked, do check it out.
Do claps if this article has given any new information today and have ☮️. Connect with me on,
“Whether you want to uncover the secrets of the universe, or you just want to pursue a career in the 21st century, basic computer programming is an essential skill to learn.” — Stephen Hawking, Theoretical Physicist, Cosmologist, Author