Home > Software design >  How can I use both ButtonStyle() and ElevatedButton.styleFrom() in flutter?
How can I use both ButtonStyle() and ElevatedButton.styleFrom() in flutter?

Time:01-26

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,

CodePudding user response:

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(),
)

CodePudding user response:

You can use merge extension

 ElevatedButton(
            onPressed: null,
            style:
                ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(50))
                    .merge(ButtonStyle(    //            
  • Related