Question 77334 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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,

Tags:

3

Answers


  1. 0

    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(),
)
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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
    )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search