How to create a floating button for attachments in flutter

Question

How do create a floating button and animate different options on its button press in Flutter? I am trying to make something like below:

When I try to add multiple floating buttons, I get 'argument for the name floating button action has already been specified' error

    class MyBills extends StatelessWidget {
  MyBills({Key key}) : super(key: key);

  //@override
  //MyBillsPageState createState() => MyBillsPageState();
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: ListView.builder(
        itemCount: 20,
        itemBuilder: (context, index) {
          return new Container(height: 100, child: BillItem());
        }
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.add),
        heroTag: 1,
        onPressed: _addAttachment
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.camera),
        heroTag: 2,
        onPressed: _cameraAttachment
      ),
    );
  }

or animate floating options like this

Is a [fab_dialer](https://pub.dartlang.org/packages/flutter_fab_dialer) what you're after? Here's also [a version](https://stackoverflow.com/questions/46480221/flutter-floating-action-button-with-speed-dial) which doesn't use a package. — soupjake, Jan 28 '19 at 09:10

CopsOnRoad · Answer 1 · 2019-01-28T05:04:54.800

3

Give every FloatingActionButton a unique heroTag tag, and you should be good to go.

floatingActionButton: FloatingActionButton(
  heroTag: 0, // you can use any object here
),

Your solution:

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: Stack(
      alignment: Alignment.bottomRight,
      children: <Widget>[
        ListView.builder(
          itemCount: 20,
            itemBuilder: (context, index) {
              return new Container(height: 100, child: BillItem());
            }
        ),
        Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            new FloatingActionButton(child: new Icon(Icons.add), heroTag: 1, onPressed: _addAttachment),
            new FloatingActionButton(child: new Icon(Icons.camera), heroTag: 2, onPressed: _cameraAttachment),
          ],
        ),
      ],
    ),
  );
}

edited Jan 28 '19 at 05:04

answered Jan 28 '19 at 04:43

CopsOnRoad

237,138
77
654
440

I gave different heroTag , but I still get the same error. – Deepak Thakur Jan 28 '19 at 04:46
I made an edit in my question. See where am I trying to add floating point – Deepak Thakur Jan 28 '19 at 04:51
that worked.. but how do I animate and display different options? Other floating buttons should be hidden on initial load of the view – Deepak Thakur Jan 28 '19 at 05:32
@DeepakThakur Kindly ask that as a separate question. And don't forget to upvote and accept this answer. Thank you :) – CopsOnRoad Jan 28 '19 at 05:45
But the inital part of my question was to animate and display floating buttons only – Deepak Thakur Jan 28 '19 at 05:48
What kind of animations are you are looking for? – CopsOnRoad Jan 28 '19 at 05:53
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187407/discussion-between-deepak-thakur-and-copsonroad). – Deepak Thakur Jan 28 '19 at 05:57

How to create a floating button for attachments in flutter

1 Answers1