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
