Flutter — Know Updated Material Buttons — ElevatedButton
Mobile application development with Flutter framework includes RaisedButton , OutlineButton & FlatButton to represent a button on screen for end user to interact/initiate a feature/functionality. To simplify and generalize usage as well as theming of buttons Flutter decides to update them to ElevatedButton, OutlinedButton & TextButton respectively. Being replaced with new widgets older ones have been deprecated after Flutter v1.25.0–8.1.pre.
In this series of articles we’ll go through details of each updated material button widget and details of their parameters as well as styling properties. First of all, we’ll start with ElevatedButton.
Basic Information
An ElevatedButton 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. Another required parameter is onPressed which accept a method callback to handle on click action when user interacts with ElevatedButton.
From this two required parameters, if we miss to give onPressed or specify it equals to null then the button will be not clickable. Simply we can say, ElevatedButton will stays disabled until we assign a method callback to onPressed method.
So let’s assign a callback to it with a log printing a static message when button gets pressed.
Once we add it, ElevatedButton will get into effect and it will be displayed with all Material properties defined for it like elevation, color et cetera.
Same as onPressed method we can also specify onLongPress method to handle call back to perform operation on long pressed of ElevatedButton.
ElevatedButton Styling
Previously RaisedButton which is now replaced with ElevatedButton is having numerous other parameters to provide different button styling to display on the screen.
To provide styling for ElevatedButton we need to provide value of ButtonStyle class to its style parameter. Most of the parameters which were available directly to previous button elements are now available via ButtonStyle class. Let’s see what are those parameters and how they all take effect when passed with appropriate values.
testStyle : Define the style for a button’s Text widget descendants. Descendants means, Text being displayed via child widget of ElevatedButton. Below code snippet will display how we can specify TextStyle values to this parameters.
backgroundColor : This will specify button’s background color.
foregroundColor : This will specify button’s foreground items color like Text & Icon on the button being displayed as child elements.
Assigning values to these parameters will result as button displayed as below.
Additionally with backgroundColor and foregroundColor, we can also specific color for ripple being displayed when button gets pressed by giving a color value to overlayColor parameter. More, to specify color for shadow of the button, give specific color value to shadowColor parameter.
For some case where we’ve to provide a little more elevation to button or to remove it totally, we can use parameter named elevation in ButtonStyle class to increase and decrease elevation of the button.
Giving elevation value equals to zero gets ElevatedButton displayed with flat style.
padding : To give padding between button’s boundary and its child element, pass a value of EdgeInsets class to this parameter. See code snippet below.
We can even customize button’s border by giving specific values to BorderSide class & assign it to side parameter of ButtonStyle. See code snippet below and outcome after it.
Here comes an interesting part where we can give different shapes to an ElevatedButton using shape parameter of ButtonStyle. Let’s go each one by one.
BeveledRectangleBorder shape
ContinuousRectangleBorder shape
RoundedRectangleBorder shape
See the UI difference for ContinuousRectangleBorder and RoundedRectangleBorder shapes with same borderRadius value given to ElevatedButton. Visually we can get exact where values are taking effect. Practically try by increasing and decreasing borderRadius value and see how it’s taking effect.
Another value for shape parameter is CircleBorder which will shape circle our defined ElevatedButton displayed as below after code snippet.
We all know this will be a less useful shape option as we already have IconButton in our plate. If they’re different in few or more ways, I’ll be covering that in different article.
So, this is all about Flutter ElevatedButton material widget which we can design with different styling options in our flutter applications. We can always check more details on its official docs here. In next part, we’ll go over basic & styling parameters of OutlinedButton . Stay tuned for it.
Do claps if my article is giving any information that is new to you today. Connect with me on,
“Learning to code is useful no matter what your career ambitions are.” — Arianna Huffington, Founder, The Huffington Post
