How to Make Two Floating Action Button in Flutter? - dart

Question

Created counter app with one floating action button.
If i want to add one more button for reset the counter, where can i add second floating action button at bottom bar?
Also i have to add any method in void section or is there any reset counter function available?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Counter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Counter App'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Text('You have pressed the button $_counter times.'),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
_counter++;
}),
tooltip: 'Increment Counter',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}

Answer 1

floatingActionButton property on Scaffold widget do not need to take FloatingActionButton widget necessarily. It can also take Column or Row widgets.
Below, I'm sharing my Scaffold widget example with two floating action buttons on top of each other.
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,
)
]
)
);

Answer 2

You can use the flutter_speed_dial package: https://pub.dartlang.org/packages/flutter_speed_dial
On the link above have a example showing how to use it. You must use SpeedDial class and on children[] you can add some buttons with SpeedDialChild. The sample below shows 2 FABs.
Example using it:
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))
],
);
}
Result:

Answer 3

According to medium post
You can use Column (for vertical alignment) or Row widget (for horizontal alignment) with 2 FAB as children and just set hero Tag null or assign diffent HeroTags.

Answer 4

You can make it by setup "heroTag: null" as below:
Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: FloatingActionButton(
heroTag: null,
...),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
heroTag: null,
...),
),
],
)

Answer 5

Yes, It's worked..!
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () => {},
child: Icon(Icons.navigate_before_rounded),
heroTag: "fab1",
),
FloatingActionButton(
onPressed: () => {},
child: Icon(Icons.navigate_next_rounded),
heroTag: "fab2",
),
]
)

Answer 6

I fixed it with this, also to add space between the buttons you can add a width and the 'hero' tags are very important.
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
backgroundColor: Colors.green,
heroTag: "btn",
onPressed: () => _speak(textEditingController.text),
child: Icon(Icons.play_arrow),
),
SizedBox(
width: 40,
),
FloatingActionButton(
backgroundColor: Colors.red,
heroTag: "btn2",
onPressed: () => _stop(),
child: Icon(Icons.stop),
)
],
),
)
enter image description here

Answer 7

In Flutter Documentation, we can use at most one floating action button on a single screen. We can do it using RawMaterialButton() widget. This widget parent widget of the floating action button
It's something like that
class RoundIconButton extends StatelessWidget {
const RoundIconButton({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return RawMaterialButton(
constraints: BoxConstraints(minHeight: 40, minWidth: 40),
shape: CircleBorder(),
fillColor: Colors.white,
onPressed: () {},
child: Text("+"),
);
}
}
class Fab extends StatelessWidget {
const Fab({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
RawMaterialButton(),
RawMaterialButton(),
],
);
}
}