Flutter — Know Updated Material Buttons — OutlinedButton
In my previous article, we started to know details of basic as well as styling parameter for ElevatedButton. In this article, we’ll go further to check basic as well as styling details of OutlinedButton widget.
Before going further, check my previous article here explaining, basics of updated Material Button — ElevatedButton widget. Also it includes which widgets have been deprecated and possibly going to remove in future.
Basic Information
First of all, same as ElevatedButton is going to replace one of the previous widget, OutlinedButton has taken place of OutlineButton. An OutlinedButton is displayed with a required child parameter (widgets that we warp inside of it). Child elements can be a single Text or Icon widget or combination of both or any other widget tree that we provide. Another required parameter is onPressed which accept a method callback to handle on click action when user touches OutlinedButton. Different from ElevatedButton, OutlinedButton will be displayed with an outline boarder around the child widgets we pass to it.
There are the minimum required parameters to display interactive OutlinedButton on screen. By mistake if we fail to specify onPressed parameter or assign null to it then OutlinedButton will act as disabled button shown as below.
Once we assign method callback to onPressed parameter, OutlinedButton becomes interactive and will be displayed with all default material properties of ButtonStyle class. See code snippet below and outcome after it.
OutlinedButton will reacts to touches by filling color specified byButtonStyle.overlayColor parameter. Along with onPressed method we can also specify onLongPress method to handle long pressed call back to perform action of it for OutlinedButton.
OutlinedButton Styling
Previously, OutlineButton was having different parameters to provide different styling properties for button being displayed on the screen. In case of updated OutlinedButton, all these parameters are combined to one parameter named style which accept the value of ButtonStyle class. This ButtonStyle class is having different parameters with the help of which we can give different styling to displayed OutlinedButton. So let’s go over majority of these parameters one by one.
textStyle : Passing TextStyle class value to this parameter will give effect to all Text being displayed in descendants of widget assigned to its child parameter.
With custom TextStyle parameter values, OutlinedButton will be displayed as below.
backgroundColor : Specify button’s background color being displayed.
foregroundColor : Specify color for button’s foreground items like Text & Icon being displayed as child descendants.
After overriding this properties in ButtonStyle class with proper color values, updated view will be as below.
To customize more, we can also override ripple color being displayed when OutlinedButton reacts on touch. To override it, we have to assign value to overlayColor parameter of ButtonStyle class.
Even we can also override color being displayed as shadow of OutlinedButton. To get it done, assign a color value to shadowColor parameter. See below how we can do that for both of these parameters.
Check updated overlay color by performing a button press & holding it until ripple gets displayed with given color value displayed as below. Easy right, of course.
Take a note here that, color assigned to parameter shadowColor will only take effect if we have elevation greater than 0 assigned to OutlinedButton using ButtonStyle parameter named elevation. If elevation is not provided greater than 0 there is no meaning to display shadow for a button.
Updating button with these changes and taking it in effect it’ll be displayed same as ElevatedButton with custom elevation applied to it. It is hard to find difference of underlying widget we have used to display this UI element. Amazing right !
Next, we can also customize space being displayed between button’s outline and content over to it. This can be done by passing EdgeInsets value to parameter named padding. To identify effect of assigning value to this parameter we’ll remove customized backgroundColor, foregroundColor, overlayColor, shadowColor & elevation parameters or else we’ll be like, “Nah..!, This is elevated button not the outlined one”. So let’s do it and see the output below how it will take effect.
Until now, we’ve seen parameters which were customizing UI of whole button but as being named OutlinedButton it should have a parameter to customize only button’s outline border being displayed wrapping child widget descendants. To answer is, we do have parameter named side in ButtonStyle class itself. Cool..isn’t it.
To get it in effect, we have to assign value of BorderSide class 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 OutlinedButton. 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. See result below where we have assign custom width and color to outline being displayed for button.
Last in the list, we do have shape parameter from ButtonStyle class which displays OutlinedButton with different shape styles. Parameter shape accepts different values of OutlineBorder parent class, so let’s go in details of each of these options one by one to see how it shapes displayed OutlinedButton.
RoundedRectangleBorder shape
Giving this shape, button will be displayed with rectangle shape having given radius for corners as displayed below.
ContinuousRectangleBoarder shape
ContinuousRectangleBoarder shape
ContinuousRectangleBoarder shapeHere, if we look at the difference between this two shapes with same borderRadius value parameter, it’s clearly visible how it gives a specific shape to a button.
BeveledRectangleBoarder shape
BeveledRectangleBoarder shapeThis a good shape value, which we can use if we want to give cuts to the button shape.
BeveledRectangleBoarder shapeCircleBorder shape
CircleBoarder shape
CircleBoarder shapeGiving this value to shape parameter of ButtonStyle will shape OutlinedButton in circular shape. This will effect in overflowing text outside OutlinedButton if we do have long text being displayed over button. So if we do have to display an icon only with outline border this can be a great choice.
So this is all basic and styling details for updated material button named OutlinedButton in flutter framework. Read more about this button in official doc here. In my next article, we’ll see details of TextButton widget. Stay tuned for it.
Do claps if my article is giving any new information to you today. Connect with me on,
“Learning to code is learning to create and innovate.” — Enda Kenny, Taoiseach, Ireland
