How can I use both ButtonStyle() and ElevatedButton.styleFrom() in flutter? - flutter

Question

Hi I'm new to flutter and I want to apply disabled color and full-screen width to ElevatedButton.
So for applying color, I did like this:
ElevatedButton(
style : ButtonStyle(
backgroundColor : MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {return Colors.green;}
else {return Colors.blue;}
}
),
...
And for applying width, I did like this:
ElevatedButton(
style : ElevatedButton.styleFrom(
minimumSize : const Size.fromHeight(50)
),
...
But I have no idea how can I combine them. Please tell me.
Thanks,

Answer 1

You can set minimumSize in ButtonStyle too, like this:
ElevatedButton(
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(Size.fromHeight(50)), /// <--- add this
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return Colors.green;
} else {
return Colors.blue;
}
}),
),
onPressed: (){},
child: Container(),
)

Answer 2

You can use merge extension
ElevatedButton(
onPressed: null,
style:
ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(50))
.merge(ButtonStyle( // 👈 use merge here
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return Colors.green;
} else {
return Colors.blue;
}
}),
)),
child: const Text("Hello"),
),
With this approach, you'll be able to use both the minimumSize and backgroundColor properties for your ElevatedButton.
You can also use other properties that ElevatedButton.styleFrom() and ButtonStyle() have and combine them as you want.

Answer 3

The style property is used to customize the appearance of the button. First, it uses the ElevatedButton.styleFrom() method to create a new ButtonStyle object, and sets the minimumSize property to Size.fromHeight(40), which means that the button will have a minimum height of 40.
Then, it uses the merge() method to merge the newly created ButtonStyle object with an existing ButtonStyle object. This allows you to customize the style of the button without overwriting the existing styles.
It then uses the backgroundColor property to set the background color of the button based on its enabled/disabled state by using MaterialStateProperty.resolveWith method, which allows you to provide a callback that returns a different color based on the button's MaterialState.
This callback checks if the button is in the disabled state by checking if the MaterialState.disabled is present in the states set, if it is present it returns the color grey else it returns the color blue.
Finally, it sets the child property to a Text widget with the text "Action Title", which is displayed on the button.
The button will be rendered with a disabled state, and its background color will be grey and its minimum height will be 40, and it will display the text "Action Title"
ElevatedButton(
onPressed: (){
//action
},
style:
ElevatedButton.styleFrom(
minimumSize: const Size.fromHeight(40))
.merge(ButtonStyle( // 👈 use merge here
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return Colors.grey;
} else {
return Colors.blue;
}
}),
)),
child: const Text("Action Title"),
),
You can pass null to the onPressed property to see the button disable state.
ElevatedButton(
onPressed: null,
// other properties
)