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