How to Make Two Floating Action Button in Flutter?

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,
);
}
}

According to [medium post][1]

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.


[1]:

[To see links please register here]

You can use the **flutter_speed_dial** package:

[To see links please register here]

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

[![enter image description here][1]][1]


[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,
)
]
)
);

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,
...),
),
],
)

I fixed it with this, also to add space between the buttons you can add a width and the 'hero' tags are very important.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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),
)
],
),
)

<!-- end snippet -->

[enter image description here][1]


[1]:

Yes, It's worked..!
```dart
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",
),
]
)
```
[![two FloatingActionButton at bottom-right][1]][1]

[1]:

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



<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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(),
],
);
}
}

<!-- end snippet -->