There is something fancy in elevated button in flutter. Firstly, there are other buttons.
Text button is one of them. TextButton is a simple flat button without a shadow. Secondly, we have Outlined Button. It’s nothing but a TextButton with a border outline. In another article we’ll differentiate and compare them.
However, what is the specialty of ElevatedButton?
We’ll learn that in this flutter tutorial.
To start with, let us know that any button is a part of Material Design in flutter. We’ve been discussing this topic for a time being. For all material design components source code you may visit this GitHub repository. You’ll get plenty of examples.
Therefore, we can say that ElevatedButton is a material design button, however, it has some specialty.
We use elevated buttons to add more dimensions to our material design.
As a result, ElevatedButton has many properties that we can control in a various way and give users rich experience in the flutter app.
We know that on a mobile screen mostly the layouts are flat. Hardly there is elevation or elevated content.
Subsequently, we must remember that we shouldn’t use elevated buttons in already elevated content widgets like Card or Dialog.
Since the name suggests that the button must have an elevation, therefore, while we press, on a Material widget, the Material.elevation increases automatically.
The ElevatedButton is a direct child of ButtonStyleButton class, as a result, it inherits a few properties from the parent class.
The ElevatedButton displays its Text and Icon widgets in style‘s ButtonStyle.foregroundColor and the button’s filled background is the ButtonStyle.backgroundColor.
The ButtonStyleButton class has provided those features.
Before taking a look at the code, to get an idea, let us have a quick look at how an ElevatedButton looks like.
We have two elevated buttons. The first one is in blue and the second one is in red.
When we press the first elevated button, it’ll turn to deep purple and the long press will add a white tone in the background.
However, the second one will not change its color. Although it will get the elevation by adding a whitish tone in the background.
In addition, we’ll take a look at the code in a minute.
How do you get the elevated button on flutter?
Before taking a look at the code, let’s know how we can get the elevated button on flutter?
We can place elevated button inside, any layout widgets, like Center, Column, etc.
In our code, we’ve kept two elevated buttons inside Column.
child: Column(
children: [
Text(
'First ElevatedButton Example',
style: TextStyle(fontSize: 30.0),
),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed))
return Colors.deepPurple;
return Colors.blue;
},
),
),
child: Text(
'First ElevatedButton',
style: TextStyle(fontSize: 30),
),
onPressed: () {},
),
const SizedBox(
height: 10,
),
Text(
'Second ElevatedButton Example: ',
style: TextStyle(fontSize: 30),
),
ElevatedButton(
child: Text('Elevated Button'),
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red),
padding: MaterialStateProperty.all(
EdgeInsets.all(50),
),
textStyle: MaterialStateProperty.all(
TextStyle(fontSize: 30),
),
),
),
],
),
// code is incomplete for brevity, please visit the respective GitHub repository for full code snippet The first elevated button looks more complicated than the first one. Let’s take a closer look.
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed))
return Colors.deepPurple;
return Colors.blue;
},
),
),
child: Text(
'First ElevatedButton',
style: TextStyle(fontSize: 30),
),
onPressed: () {},
),We’ve overridden the style parameter of the elevated button with ButtonStyle and as the background property we’ve used MaterialState and MaterialStateProperty. We’ve an elaborate discussion on that topic before, please read that article on MaterialState and MaterialStateProperty.
Because of these Material State properties, the elevated button changes its color while we press it.
The first elevated button changes its color to deep purple from blue while we press it.
However, the second elevated button doesn’t change the color while it gets pressed.
Actually, defaultStyleOf defines elevated button’s default style, and one can override the style of this elevated button, as we’ve done with button style class.
If we take a closer look at the second elevated button, we’ll find that we can define background color, text style with the help of MaterialStateProperty.
ElevatedButton(
child: Text('Elevated Button'),
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red),
padding: MaterialStateProperty.all(
EdgeInsets.all(50),
),
textStyle: MaterialStateProperty.all(
TextStyle(fontSize: 30),
),
),The static styleFrom method is another convenient way to create a elevated button ButtonStyle from simple values.
ElevatedButton(
onPressed: () => {},
child: Text(' ADD '),
style: ElevatedButton.styleFrom(
primary: Colors.purple,
padding: EdgeInsets.symmetric(
horizontal: 20, vertical: 20),
textStyle: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
),
),
),
Leave a Reply