Saltar al contenido

¿Cómo hacer dos botones de acción flotantes en Flutter?

Roberto, miembro de este gran equipo de trabajo, nos ha hecho el favor de escribir esta reseña porque controla muy bien dicho tema.

Solución:

floatingActionButton propiedad en Scaffold widget no necesita tomar FloatingActionButton widget necesariamente. también puede tomar Column o Row widgets

A continuación, comparto mi ejemplo de widget Scaffold con dos botones de acción flotantes uno encima del otro.

return Scaffold(
  appBar: AppBar(
    title: Text(""),
  ),
  body: SingleChildScrollView(/*...*/),
  floatingActionButton: Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      FloatingActionButton(
        child: Icon(
          Icons.delete
        ),
        onPressed: () 
          //...
        ,
        heroTag: null,
      ),
      SizedBox(
        height: 10,
      ),
      FloatingActionButton(           
        child: Icon(
          Icons.star
        ),
        onPressed: () => _someFunc(),
        heroTag: null,
      )
    ]
  )
);

Puedes usar el flutter_speed_dial paquete: https://pub.dartlang.org/packages/flutter_speed_dial

En el enlace de arriba tiene un ejemplo que muestra cómo usarlo. Debes usar SpeedDial clase y en children[] puedes agregar algunos botones con SpeedDialChild. El siguiente ejemplo muestra 2 FAB.

Ejemplo usándolo:

Widget _getFAB() 
        return SpeedDial(
          animatedIcon: AnimatedIcons.menu_close,
          animatedIconTheme: IconThemeData(size: 22),
          backgroundColor: Color(0xFF801E48),
          visible: true,
          curve: Curves.bounceIn,
          children: [
                // FAB 1
                SpeedDialChild(
                child: Icon(Icons.assignment_turned_in),
                backgroundColor: Color(0xFF801E48),
                onTap: ()  /* do anything */ ,
                label: 'Button 1',
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48)),
                // FAB 2
                SpeedDialChild(
                child: Icon(Icons.assignment_turned_in),
                backgroundColor: Color(0xFF801E48),
                onTap: () 
                   setState(() 
                      _counter = 0;
                   );
                ,
                label: 'Button 2',
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48))
          ],
        );
  

Resultado:

ingrese la descripción de la imagen aquí

Según medio post

Puede usar el widget Columna (para alineación vertical) o Fila (para alineación horizontal) con 2 FAB como hijos y simplemente establecer la etiqueta de héroe null o asignar diferentes HeroTags.

Nos puedes proteger nuestra investigación mostrando un comentario y dejando una valoración te estamos agradecidos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *