Flutter – Botón de acción flotante

Un botón de acción flotante es un botón de icono circular que se desplaza sobre el contenido para promover una acción principal en la aplicación. Los botones de acción flotantes se usan más comúnmente en el campo Scaffold.floatingActionButton .

Constructor:

Syntax:
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})

Propiedades:

• autofocus: Esta propiedad toma un valor booleano como objeto (final) para decidir si el botón será seleccionado en el foco inicial.
• backgroundColor : color de fondo del botón.
• niño: el widget que se mostrará.
• clipBehaviour: esta propiedad toma clip enum como el objeto para decidir si el contenido se recortará o no.
• disabledElevation: con un valor doble como objeto, esta propiedad decide la ubicación del botón en la coordenada z cuando el botón está deshabilitado.
• elevación: Nuevamente esta propiedad toma un doble como objeto. Y controla la ubicación en la coordenada z en la que se colocará el botón.
• focusColor: esta propiedad decidió el color que se rellenará en el botón en el momento del enfoque de entrada. Toma la clase Color como el objeto.
• 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.
• heorTag: Esto es para agregar una etiqueta de héroe a uno de los widgets en el botón.
• HighlightElevation: esta propiedad controla la ubicación del eje z en el que colocar el botón mientras el usuario interactúa con él.
• hoverColor: esta propiedad contiene la clase Color como objeto. Controla el color que se pintará en el botón en caso de desplazamiento.
• hoverElevation: esta propiedad toma un valor doble como parámetro para decidir la altura del botón en el eje z en el que debe colocarse el botón en el momento del desplazamiento.
• isExtended: esta propiedad toma un valor booleano como objeto. Si se establece en verdadero, el botón se convierte en un botón de acción flotante extendido.
• materialTapTargetSize: esta propiedad está ahí para controlar el tamaño de destino del toque del botón.
• mini : controla el tamaño del botón.
• mouseCursor: esta propiedad toma la propiedad MouseCursor como objeto. 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.
• También tenemos flotanteActionButtonLocation para establecer la ubicación del botón.

Ejemplo:

El archivo main.dart .

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FAB',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  int i=0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlue[50],
      appBar: AppBar(
        title: Text("FloatingActionButton",),
        backgroundColor: Colors.green,
        actions: <Widget>[
          Text("GFG",textScaleFactor: 3,)
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          Text("Floating action button pressed this many times"),
          Text("$i",textScaleFactor: 3,)
        ],),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        // isExtended: true,
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            i++;
          });
        },
      ),
    );
  }
}

Producción:

Si las propiedades se definen de la siguiente manera:

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            i++;
          });
        },
      ),

Se pueden observar los siguientes cambios de diseño:

Si las propiedades se definen de la siguiente manera:

floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            i++;
          });
        },
      ),

Se pueden observar los siguientes cambios de diseño:

Si las propiedades se definen de la siguiente manera:

floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            i++;
          });
        },
      ),
      // counter i is 9 when we tapped the button 9 times

Se pueden observar los siguientes cambios de diseño:

Explicación:

• Crea un botón de acción flotante y dale un hijo.
• Agregue la función de devolución de llamada onPressed para aumentar la variable de contador i.
• Dar color de fondo si es necesario.
• Usa floatActionButtonLocation para establecer la ubicación del botón.

El código completo está disponible en https://github.com/singhteekam/GFG-Articles/tree/master/floatingActionButton_in_flutter