capitan apps

Tiempo de lectura: 4 minutos

Flutter cuenta con 4 tipos de botones: TextButton, ElevatedButton, OutlinedButton e IconButton, los cuales nos permiten habilitar interacciones con el usuario.

A continuación veremos ejemplos (del más sencillo al más complejo) de cómo utilizar estos widgets para crear nuestros propios botones.

Para mostrar las capacidades del widget Button en la pantalla estaremos usando nuestro código base que creamos en el post “Conoce los principales componentes de tu aplicación”.

Lo primero que haremos será escribir el código mínimo para declarar nuestro botón.

TextButton

El código que vamos a escribir es el código mínimo necesario para definir un botón. Reemplazaremos todo dentro del bloque  body: agregando lo siguiente:

TextButton(
  onPressed: () {
    print("Button pressed");
  },
  child: Text("TEXT BUTTON"),
)

Contiene la propiedad onPressed que define la acción a ejecutar al hacer tap sobre el botón. También contiene la propiedad child que con el widget Text nos permite asignar el texto del botón (Widget Text, mismo que vimos previamente 2.2 Text).

Entonces el código completo del archivo main.dart queda de la siguiente manera:

hello_app/lib/main.dart

A continuación veremos los tipos de botones OutlinedButton y ElevatedButton que se generan de la misma manera que el TextButton, sólo debemos cambiar la clase TextButton por OutlinedButton o ElevatedButton según deseemos.

Aquí presento el ejemplo de cómo queda el código para declarar cada uno de estos botones y cómo se visualizan.

OutlinedButton

OutlinedButton(
  onPressed: () {
    print("Button pressed");
  },
  child: Text("TEXT BUTTON"),
)

ElevatedButton

ElevatedButton(
  onPressed: () {
    print("Button pressed");
  },
  child: Text("TEXT BUTTON"),
)

IconButton

En caso de encontrarnos con la necesidad de agregar sólo un icono en el botón utilizaremos el widget IconButton de la siguiente manera:

IconButton(
  icon: Icon(Icons.volume_up),
  onPressed: () {},
)

Para asignar un color a nuestro IconButton debemos utilizar el widget Ink que cuenta con la propiedad decoration: la cual nos permite personalizar colores y formas. En este caso vamos a generar un botón de color azul y un icono color blanco. Al cambiar el color del botón la forma se cambia automáticamente de circular a cuadrada, si requieres regresar a la forma circular tienes que utilizar la propiedad shape: con el widget CircleBorder().

El código queda de la siguiente manera:

Ink(
  decoration: ShapeDecoration(
    color: Colors.lightBlue,
    shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.volume_up),
    color: Colors.white,
    onPressed: () {},
  )
)

No te preocupes estaremos explorando este widget de manera más profunda en siguientes post.

Personalización de un botón

Ya hemos visto los tipos de botones que tenemos en Flutter pero ahora vamos a personalizarlos agregando textos más grandes, colores, formas e iconos (que es un proceso distinto al IconButton).

Para cambiar el estilo del botón podemos utilizar la propiedad style: y personalizarlo con el widget ButtonStyle.

ButtonStyle

Vamos a comenzar cambiando nuestro color del texto a rojo con la propiedad primary: y agregar un color a nuestro botón con la propiedad backgroundColor:.

ElevatedButton(
  onPressed: () {
    print("Button pressed");
  },
  style: TextButton.styleFrom(
    primary: Colors.redAccent,
    backgroundColor: Colors.amber),
  child: Text("TEXT BUTTON")
)

TextStyle

Éste widget sirve para darle estilo a nuestro texto. Nos permite elegir color, peso, tamaño y estilo. Podemos reutilizar lo que ya vimos en el post anterior 2.2 Text – TextStyle.

ElevatedButton(
  onPressed: () {
    print("Button pressed");
  },
  style: TextButton.styleFrom(
    primary: Colors.redAccent,
    backgroundColor: Colors.amber),
  child: Text(
    "TEXT BUTTON",
    style: TextStyle(
      fontWeight: FontWeight.normal,
      fontSize: 40,
      fontStyle: FontStyle.italic,
      color: Colors.deepPurpleAccent),
  )
)

Agregando un icono

Debemos utilizar la función icon() la cual nos permite incrustar un icono dentro de las clases TextButton, ElevatedButton, y OutlinedButton.

Ya hemos aprendido el widget Icon en el post 2.3 Icons y lo podemos reutilizar en este caso.

ElevatedButton.icon(
  icon: Icon(
    Icons.done_all,
    size: 18,
    color: Colors.deepPurpleAccent,
  ),
  onPressed: () {
    print("Button pressed");
  },
  style: TextButton.styleFrom(
    primary: Colors.redAccent,
    backgroundColor: Colors.amber),
  label: Text("TEXT BUTTON")
)

La lista de todos los iconos disponibles la podemos encontrar aquí: https://material.io/resources/icons/?style=baseline

El código completo de nuestro ejemplo main.dart queda de la siguiente manera:

hello_app/lib/main.dart

Y así hemos aprendido cómo podemos utilizar botones en nuestra aplicación, qué tipos de botones disponibles tenemos para nuestro uso y cómo puedes personalizarlos a tu gusto o en base a especificaciones de diseño.



¿Te está gustando este curso? Aquí hay más temas que otras personas están viendo en este momento.
Recommended Reads