FAB – Marcación rápida en Flutter

El botón de acción flotante , comúnmente abreviado como FAB , es un botón de acción principal que tiene una posición fija sobre una aplicación, sin alterar el contenido de la pantalla. La marcación rápida es un tipo de transición de FAB, donde emite múltiples entidades como una acción de un FAB en la misma pantalla.

Botón de acción flotante:

FAB tiene tres partes. Son contenedores , iconos y texto . Según estas partes, FAB se clasifica en dos tipos.

    1. Regular: contenedor con solo un ícono (predeterminado)

    2. Extendido:  

          i. Contenedor con solo Texto

          ii. Contenedor con icono y texto

Los contenedores FAB tienen dos tamaños predeterminados. Son predeterminados (56 x 56 dp) y mini (40 x 40 dp). La forma o el ancho del contenedor FAB son de dos tipos.

    1. Fijo: ancho acumulativo del contenido de un contenedor, incluido el relleno

    2. Fluido: ancho relativo a la pantalla o cuadrícula de diseño de la aplicación

De forma predeterminada, un contenedor básico tiene forma circular, donde el icono se coloca en el centro.

La visibilidad, el movimiento e incluso las animaciones de FAB son altamente personalizables, lo que lo hace bastante relevante y de fácil acceso en una pantalla. Como se mencionó anteriormente, los FAB son fijos, pero se ciernen sobre el contenido y lo sacan completamente del contexto del contenido de la pantalla. Por lo tanto, es muy recomendable usar los FAB relevantes para una pantalla en particular.

Cuando se hace clic en los FAB, realizan acciones que ocurren en la misma pantalla o en una diferente. Las transiciones FAB pueden tener las siguientes formas:

    1. Marcación rápida (FAB con íconos y etiquetas)  

    2. Menú

    3. Subsuperficies (nueva superficie en la misma pantalla)  

    4. Nueva pantalla

Marcación rápida en Flutter

La marcación rápida es un tipo de transición de FAB, donde se emite una pila de acciones desde un FAB cuando se hace clic en la misma pantalla. Estas acciones tienen la forma de FAB con íconos y etiquetas. Se puede lograr una marcación rápida mediante el uso de un complemento/dependencia llamado » flutter_speed_dial «.

Los pasos para agregar el complemento a la aplicación Flutter son los siguientes:

Paso 1: abra el archivo «pubspec.yaml» de la carpeta del proyecto.

Paso 2: en el archivo pubspec.yaml, escriba flutter_speed_dial: en dependencias.

El código se ve así:

dependencies:
  flutter:
    sdk: flutter
  flutter_speed_dial:

Paso 3: Ahora haga clic en el botón » Pub Get » en la parte superior de la aplicación (Android Studio).

Paso 4: El » Proceso finalizado con el código de salida 0 » en la consola muestra que la dependencia se agregó correctamente.

Paso 5:Ahora importe el complemento o paquete agregando la importación ‘paquete: flutter_speed_dial/flutter_speed_dial.dart’; código en la parte superior del archivo main.dart .

Código fuente:

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  SpeedDial buildSpeedDial() {
    return SpeedDial(
      animatedIcon: AnimatedIcons.menu_close,
      animatedIconTheme: IconThemeData(size: 28.0),
      backgroundColor: Colors.green[900],
      visible: true,
      curve: Curves.bounceInOut,
      children: [
        SpeedDialChild(
          child: Icon(Icons.chrome_reader_mode, color: Colors.white),
          backgroundColor: Colors.green,
          onTap: () => print('Pressed Read Later'),
          label: 'Read',
          labelStyle:
              TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
          labelBackgroundColor: Colors.black,
        ),
        SpeedDialChild(
          child: Icon(Icons.create, color: Colors.white),
          backgroundColor: Colors.green,
          onTap: () => print('Pressed Write'),
          label: 'Write',
          labelStyle:
              TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
          labelBackgroundColor: Colors.black,
        ),
        SpeedDialChild(
          child: Icon(Icons.laptop_chromebook, color: Colors.white),
          backgroundColor: Colors.green,
          onTap: () => print('Pressed Code'),
          label: 'Code',
          labelStyle:
              TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
          labelBackgroundColor: Colors.black,
        ),
      ],
    );
  }
  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Geeks for Geeks'),
          backgroundColor: Colors.green,
        ),
        body: SafeArea(
          child: Center(
            child: Text(
              'Welcome to GFG!',
              style: TextStyle(
                fontSize: 30.0,
                color: Colors.green,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        floatingActionButton: buildSpeedDial(),
      ),
    );
  }
}

Explicación del código:

1. Se crea una pantalla básica con una barra de aplicaciones, texto y un FAB.

2. A este FAB se le asigna una acción llamada buildSpeedDial .

3. La función buildSpeedDial tiene un FAB principal llamado SpeedDial y muchos otros FAB SpeedDialChild adjuntos.

4. SpeedDial no es más que el FAB principal que está en la pantalla, que cuando se hace clic se expande para emitir esos múltiples SpeedDialChild.

5. SpeedDial se puede personalizar usando muchas funciones como icono animado , tema de icono animado , visible (visibilidad del FAB en la pantalla), curva (la forma en que actúa el FAB cuando se hace clic) y mucho más.

6. SpeedDialChild también es completamente personalizable, con funciones como backgroundColor , onTap , label, labelStyle , Child(Icon), labelBackgroundColor , etc.  

Nota: El comando onTap:() => print(“Pressed”), se ejecutará en la consola flutter.

Producción: