Flutter Elevated Button - How do I remove elevation with MaterialStateProperty.all?

Question

Ok, with the new flutter updates I have figured out most things, but I can't seem to figure out what the elevated property wants. I have applied MaterialStateProperty.all and the property is asking for a positional argument but I don't know what it wants. I have tried double, elevatedValue and everything else predictable but I can not discern how to set this to zero. Can someone please provide a code example of the new Elevated Button with the elevation set to zero using MaterialStateProperty please?

Answer 1

This is how you use new Elevated button

ElevatedButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return greyColor;
            }
            return selectedPrimaryColor; // Defer to the widget's default.
          },
        ),
        elevation: MaterialStateProperty.resolveWith<double>(  // As you said you dont need elevation. I'm returning 0 in both case
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return 0;
            }
            return 0; // Defer to the widget's default.
          },
        ),
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return greyColor;
            }
            return selectedPrimaryColor; // Defer to the widget's default.
          },
        ),
      ),
    ),

Btw I extract this from themeData. So that I don't need to repeat the code again and again. You should also learn ThemeData class. Here is the docs.

Answer 2

Another cleaner approach from the accepted answer is to use styleFrom method:

ElevatedButton(
  style: ElevatedButton.styleFrom(elevation: 0),
);