Clase FloatingActionButton en la biblioteca de materiales Flutter con ejemplo

El botón de acción flotante es el tipo de widget de botón más exclusivo que se proporciona en flutter. Es un widget que flota en la pantalla sobre otros widgets. Aparece como un ícono circular en la pantalla con un ícono en el centro como su hijo. Por defecto, se coloca en la esquina inferior derecha de la pantalla. Para poder usar un botón de acción flotante en su aplicación, use el botón de acción flotante proporcionado en las propiedades de Scaffold. 

Constructor

FloatingActionButton(
    {Key key, 
    Widget child, 
    String tooltip, 
    Color foregroundColor, 
    Color backgroundColor, 
    Color focusColor, 
    Color hoverColor, 
    Color splashColor, 
    Object heroTag: const _DefaultHeroTag(), 
    double elevation, 
    double focusElevation, 
    double hoverElevation, 
    double highlightElevation, 
    double disabledElevation, 
    @required VoidCallback onPressed, 
    MouseCursor mouseCursor, 
    bool mini: false, 
    ShapeBorder shape, 
    Clip clipBehavior: Clip.none, 
    FocusNode focusNode, 
    bool autofocus: false, 
    MaterialTapTargetSize materialTapTargetSize, 
    bool isExtended: false}
)

Hay tres categorías de un botón de acción flotante, a saber:

Botón de acción flotante regular 

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.black,
        onPressed: () {},
        child: Icon(Icons.add),
      )

Salida :

 

Mini botón de acción flotante

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.black,
        mini: true,
        onPressed: () {},
        child: Icon(Icons.add),
      )

Salida :

 

Botón de acción flotante extendido

FloatingActionButton.extended(
          backgroundColor: Colors.green,
          foregroundColor: Colors.black,
          onPressed: () {
            // Respond to button press
          },
          icon: Icon(Icons.add),
          label: Text('Floating Action Button'),
        )

Salida :

 

Propiedades

• autofocus : da un valor booleano correspondiente al enfoque inicial del botón.
• backgroundColor : color de fondo del botón.
• clipBehaviour : decide si el contenido se recorta o no.
• focusNode : representa el Node de enfoque del widget
• Estilo ButtonStyle : decide el estilo del buttonfocusColor.
• focusElevtion : decidió la ubicación del botón en el eje z para colocar el botón en el momento del enfoque de entrada.
• focusNode : proporciona un Node de enfoque adicional para el botón.
• color de primer plano : controla el color predeterminado del texto y el icono dentro del botón.
• mini : controla el tamaño del botón
• mouseCursor : controla el cursor del puntero del mouse cuando interactúa con el botón.
• onPressed : función de devolución de llamada.
• splashColor : color de bienvenida de FloatingActionButton.
• forma : la forma del botón.
• onLongPress : la acción que se ejecutará cuando el usuario mantenga presionado el botón
• habilitado : da un valor booleano para la actividad del botón
• hashcode : decide el código hash del botón
• Clave : controla cómo un widget reemplaza a otro widget en el árbol.
• onFocusChanged : un método que se ejecutará al cambiar el foco del botón
• onHover : acción que se ejecutará cuando el usuario pase el botón

Métodos

• createElement() : crea un StatefulElement para administrar la ubicación del botón en el árbol de widgets.
• build(BuildContext context) : Describe la parte de la interfaz de usuario.
• debugDescribeChildren() : Devuelve una lista de objetos DiagnosticsNode que describen los hijos de este Node
• debugFillProperties() : agrega propiedades adicionales asociadas con el Node
• noSuchMethod() : se invoca cuando se accede a un método o propiedad inexistente
• toDiagnosticsNode() : Devuelve una representación de depuración del objeto que utilizan las herramientas de depuración 
• toString() : una representación de string de este objeto
• toStringDeep(): Devuelve una representación de string de este Node y sus descendientes.
• toStringShallow() : Devuelve una descripción detallada de una línea del objeto
• toStringShort() : una breve descripción textual de este widget

Algunas de las propiedades comúnmente utilizadas se explican a continuación de la siguiente manera:

Color

1. color de fondo

FloatingActionButton(
        backgroundColor: Colors.green,
        onPressed: (){},
        child: Icon(Icons.perm_camera_mic),
      )

2. color de primer plano

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        onPressed: (){},
        child: Icon(Icons.perm_camera_mic),
      )

3. salpicaduras de color

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        splashColor: Colors.yellow,
        onPressed: (){},
        child: Icon(Icons.perm_camera_mic),
      )

4. color flotante

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        splashColor: Colors.yellow,
        hoverColor: Colors.red,
        onPressed: (){},
        child: Icon(Icons.perm_camera_mic),
      )

Salida :

Elevación

disabledElevation

FloatingActionButton(
    onPressed: (){}
    disabledElevation: 0,
    child: Icon(Icons.perm_camera_mic),
),

focoElevación

FloatingActionButton(
    autofocus: true,
    focusElevation: 5,
    onPressed:(){},
    child: Icon(Icons.perm_camera_mic),
),

resaltarElevación

FloatingActionButton(
    higlightElevation: 50,
    onPressed:(){},
    child: Icon(Icons.perm_camera_mic),
),

hoverElevation

FloatingActionButton(
    hoverElevation: 50,
    onPressed:(){},
    child: Icon(Icons.perm_camera_mic),
),

Salida :

Etiqueta de héroe

FloatingActionButton(
  heroTag: 'GFG's Hero Tag',
),

Salida :

Entendamos los ejemplos anteriores de cerca.

Ejemplo

import 'package:flutter/material.dart';
 
void main() {
  runApp(HomeApp());
}
 
class HomeApp extends StatefulWidget {
  HomeApp({Key? key}) : super(key: key);
 
  @override
  State<HomeApp> createState() => _HomeAppState();
}
 
class _HomeAppState extends State<HomeApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            floatingActionButtonLocation:
                FloatingActionButtonLocation.centerFloat,
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}
 
class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        splashColor: Colors.yellow,
        hoverColor: Colors.red,
        elevation: 10,
        heroTag: 'GFG Tag',
        // autofocus: true,
        // focusElevation: 5,
        // disabledElevation: 0,
        // higlightElevation: 50,
        // hoverElevation: 50,
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        child: Icon(Icons.perm_camera_mic),
      )),
    );
  }
}
 
class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);
 
  @override
  State<NewScreen> createState() => _NewScreenState();
}
 
class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();
 
  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(
        child: Hero(tag: 'GFG Tag', child: Icon(Icons.save)),
      ),
    );
  }
}

Producción: