41

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,
    );
  }
}
6
  • You want use FAB or Button inside bottom bar?
    – Augusto
    Mar 14, 2019 at 16:14
  • Want to use FAB only, it is not necessary to use in bottom bar. Mar 14, 2019 at 16:28
  • You want two or more FAB buttons ok?
    – Augusto
    Mar 14, 2019 at 16:32
  • only two FAB buttons Mar 14, 2019 at 16:36
  • See answer below..
    – Augusto
    Mar 14, 2019 at 16:39

7 Answers 7

75

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,
      )
    ]
  )
);
3
  • Can you clarify what that heroTag: null means, I'm a bit confused about it?
    – sh_ark
    Sep 15, 2021 at 11:34
  • 3
    heroTag is the tag to apply to the button's Hero widget. By default Flutter assumes that there should be only one FloatingActionButton per screen, and if one uses more than one FloatingActionButton on a screen then heroTags must be set explicitly. On above example I set them ´null´ as I didn't use any animations on those buttons. You can be set something like heroTag: "heroTag1" and on the other FloatingActionButton like heroTag: "heroTag2" if you are using Animations. For more details check this link: api.flutter.dev/flutter/material/…
    – RaZzLe
    Sep 21, 2021 at 6:10
  • in flutter documentation, we can use most in action buttons per screen. May 25, 2022 at 3:00
38

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:

enter image description here

5
  • Thank you so much. Can you help me what to write in " onTap: () {}, label: 'Button 2'," to reset the counter? Mar 14, 2019 at 16:48
  • 4
    is it possible to have 2 FABs horizontally aligned in the bottom right of the screen without having the unfolding functionality of the speed dial widget? (i.e. so that both FABs are displayed permanently) Sep 20, 2019 at 18:58
  • 1
    @Augusto your answer is correct, there is a syntax error. Just add ); to close the setState correctly. Dec 24, 2019 at 10:50
  • @Rich Steinmetz, look up the answer by RaZzLe and try with Row instead of Column
    – Dalibor
    Sep 15, 2022 at 17:00
  • 1
    perfect simple example, better then the one they have in their pub.dev site, just one note: add this _getFAB() result to the Scaffold's floatingActionButton attribute, like this: floatingActionButton: _getFAB(),
    – Shaybc
    Oct 8, 2022 at 11:41
7

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

two FloatingActionButton at bottom-right

4
  • Error : multiple heroes that share the same tag within a subtree Oct 29, 2021 at 7:54
  • could you please share your code? OR checkout full code here maybe you need to add heroTag: "fab1", & heroTag: "fab2", to each FloatingActionButton Nov 5, 2021 at 10:16
  • in flutter documentation, we can use most in action buttons per screen May 25, 2022 at 3:00
  • No way to add padding here, they touch each other awkwardly. Sep 23, 2022 at 13:29
6

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.

6

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,
             ...),
    ),
  ],
)
1
  • in flutter documentation, we can use most in action buttons per screen May 25, 2022 at 3:00
1

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.