De RaisedButton a ElevatedButton en Flutter

Te quería hacer una rápida demostración en cómo puedes migrar de un RaisedButton a un ElevatedButton que es el nuevo widget que tenemos que usar a partir de Flutter en la versión 2; recordemos que un RaisedButton normal luce como el siguiente:

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

Generalmente definimos el color de fondo (color) y el color de texto (textColor).

Si queremos migrar al ElevatedButton, ya no podemos definir cuestiones de estilo mediante propiedades que formen parte nativamente del ElevatedButton, si no solamente tenemos una propiedad llamada style en la cual podemos definir cuestiones de diseño:

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

Definir el estilo del ElevatedButton

Con el ElevatedButton.styleFrom, podemos definir el estilo de nuestro botón ElevatedButton:

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

Y con esto se lo pasamos; ya con esto podemos definir el estilo de nuestro botones para que funcione similar al del RaisedButton

• Con primary tenemos el botón principal del componente, el color de fondo 
• Y el de onPrimary afecta el color de texto y el efecto ripple:

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

15-08-2021 - Andrés Cruz

In english

• Categoría
• /
• Flutter
• /
• De RaisedButton a ElevatedButton en Flutter