Search code examples
flutterelevation

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


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?


Solution

  • 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.