De RaisedButton a ElevatedButton en Flutter

- Andrés Cruz

In english
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"),
),
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.