From RaisedButton to ElevatedButton in Flutter

I wanted to give you a quick demonstration on how you can migrate from a RaisedButton to an ElevatedButton, which is the new widget that we have to use starting with Flutter in version 2; remember that a normal RaisedButton looks like the following:

RaisedButton(
              color: Colors.purple,
              textColor: Colors.white,
              onPressed: () {
                // hacer algo
              },
              child: Text("Ir a la página dos"),
            ),

Generally we define the background color (color) and the text color (textColor).

If we want to migrate to the ElevatedButton, we can no longer define style issues through properties that are natively part of the ElevatedButton, instead we only have a property called style in which we can define design issues:

 ElevatedButton(
              style: ###TU ESTILO###
              child: Text("Ir a la página uno"),
),

Define the style of the ElevatedButton

With the ElevatedButton.styleFrom, we can define the style of our ElevatedButton:

final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
    onPrimary: Colors.white,
    primary: Colors.purple,
    padding: EdgeInsets.symmetric(horizontal: 16),
);

And with this we pass it on; Now with this we can define the style of our buttons so that it works similar to that of the RaisedButton

• With primary we have the main button of the component, the background color
• And the one in onPrimary affects the text color and the ripple effect:

ElevatedButton(
              style: raisedButtonStyle,
              onPressed: () {
                // hacer algo
              },
              child: Text("Ir a la página uno"),
),

01-05-2023 - Andrés Cruz

En español

• Category
• /
• Flutter
• /
• From RaisedButton to ElevatedButton in Flutter