FloatingActionButton en Flutter con cuatro tamaños: Extendido, grande, regular y pequeño

- Andrés Cruz

In english

FloatingActionButton en Flutter con cuatro tamaños: Extendido, grande, regular y pequeño

FloatingActionButton es un widget de Flutter que proporciona un botón flotante circular que se utiliza comúnmente para acciones secundarias y funciones adicionales en una aplicación. El botón puede tener un icono o un texto dentro de él, y puede flotar encima de otros elementos de la interfaz de usuario. El diseño visual del botón se adapta automáticamente a la plataforma en la que se ejecuta la aplicación. Puede utilizarse en combinación con otros widgets, como el Scaffold y AppBar, para mejorar la funcionalidad y el aspecto visual de la aplicación.

Una de las últimas incorporaciones que nos trae Flutter, es que ahora la clase FloatingActionButton nos permite definir el tamaño del botón:

Para eso podemos emplear los constructores con nombre, si queremos aplicar los NUEVOS botones:

4 Botones de tipo flotante para Flutter
4 Botones de tipo flotante para Flutter

Botón flotante Extendido

FloatingActionButton.extended(
            onPressed: () {}, label: Text("Extendido")),

FloatingActionButton Largo o big

FloatingActionButton.large(
         child: Icon(Icons.plus_one),
         onPressed: (){
       }),

Regular

 floatingActionButton: FloatingActionButton(
          child: Icon(Icons.plus_one),
          onPressed: (){
        }),

Botón flotante Pequeño

floatingActionButton: FloatingActionButton.small(
          child: Icon(Icons.plus_one),
          onPressed: (){
        }),

Conclusiones

  • Como puedes ver, el botón regular, viene siendo el estándar o por defecto y por ende no debemos de indicar ningún constructor con nombre.
  • El botón extendido le tenemos que definir un parámetro más, el label, que por su composición sería un texto; el resto de los botones es la definición que seguimos con el esquema anterior, de indicar un child para el icono y demás aspectos adicionales que quieras personalizar.

Acepto recibir anuncios de interes sobre este Blog.

Ahora tenemos 4 tamaños para los FloatingActionButton en Flutter: Extendido, grande, regular y pequeño, aprende a utilizarlos.

- Andrés Cruz

In english