Flutter: What is the difference ButtonStyle() and .styleFrom()

user_4725553 0
Viewed 21010

I am new in Flutter.

Here is my code,

For ElevatedButton,

ElevatedButton(
                  onPressed: () {
                    // Add your onPressed code here!
                  },
                  child: Text("Login"),
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(
                          AppColors.SecondaryColor),
                      foregroundColor: MaterialStateProperty.all<Color>(
                          AppColors.PrimaryColor))),

For OutlinedButton,

OutlinedButton(
                  onPressed: () {
                    // Add your onPressed code here!
                  },
                  child: Text("Register Now"),
                  style: OutlinedButton.styleFrom(
                    side: BorderSide(width: 2, color: AppColors.SecondaryColor),
                  ))

My question is why I must use styleFrom for OutlinedButton instead of ButtonStyle? if substitute OutlinedButton.styleFrom with ButtonStyle, it gives error. Why?

I am very confuse with the usage of ButtonStyle and styleFrom. Because some of the example on the internet use ButtonStyle while some use styleFrom.

flutter-widget flutter
2 Answers

  1. What error do you get?

    As the documentation says, both the ElevatedButton and OutlinedButton supports both ButtonStyle() and .styleFrom().

    With ButtonStyle() you've to define all the required properties and with ButtonStyle.styleFrom() picks the default set values and you only change the required values.

    It'll be a lot easier to help you if you tell what error you get in using ButtonStyle() in OutlinedButton

---------------------------------------------------------------------------------------------------------------------- UPDATED ANSWER

Yes, because the side parameter in ButtonStyle() requires value of MaterialStateProperty and not of BorderSide . Use this code to see how it works:

OutlinedButton(
              onPressed: null,
              child: Text('Outlined Button'),
              style: ButtonStyle(
                side: MaterialStateProperty.all(
                  BorderSide.lerp(
                      BorderSide(
                        style: BorderStyle.solid,
                        color: Color(0xffe4e978),
                        width: 10.0,
                      ),
                      BorderSide(
                        style: BorderStyle.solid,
                        color: Color(0xffe4e978),
                        width: 10.0,
                      ),
                      10.0),
                ),
              ),
            ),

Output:enter image description here

See this link for more understanding about this.

user_145642990

As the documentation say, the styleFrom() method is a simpler way to apply Button Style :

A static convenience method that constructs an elevated button [ButtonStyle] given simple values.

You have the same behavior with all three new Material buttons (TextButton, OutlinedButton and ElevatedButton)

user_74629330
Related