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.
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.