More than One Floating Action Button in one page

Hello Mobile devs !! Flutter has become a hot topic already. And I love it too (Though it doesn’t support reflections and ORMs 😔 😔) .

Anyways , while designing a page (Activity layout) , I wanted to have two floating action buttons (FABs) . And we have seen apps with that, even we have seen apps with Floating action menu.

Two Fabs

Well lets see for Flutter . Flutter is great , it gives a named parameter in Scaffold widget ‘floatingActionButton’. Just give floating action button Object and you are done .

And there you go , by default it places fab at bottom end.

FAB by Default bottom end position

So what if I want to give two FABs or three FABs or more ?

Well there is only one named parameter of ‘floatingActionButton’. Does it mean , we can’t add more than one FAB per page . 🤔

Well !! the thing is named parameter ‘floating action button’ doesn’t take FloatingActionbutton as parameter it takes Widget as parameter

From scaffold.dart

To the Two FABs

Since named parameter takes widget we can take Column (for vertical alignment) or Row widget (for horizontal alignment)

And that’s it, and we get this

Two FABs on First screen

Pretty easy right ?

So if I want this page (Containing two FABs) be my second screen like this

First and Second Screen

It should have done the thing but what I really got was this

Tadah !! a pitch perfect black screen . How beautiful !! and it came with this lovely message

Console Message

Here’s the thing ! , hero Tags . Before that lets see what are hero animations

Hero Animations

Hero animation example

Hero animations allow the widget (which is present in two screens but in two different positions) to fly or move from previous position to next with beautiful animation.

Hero Tags are just unique ids to identify the Hero widgets (widgets which can perform Hero animations) .

But neither my FABs are present in two screens nor they are Hero Widgets , then ….

Actually FAB contains Hero Widget in itself, so the Hero Tag. If not explicitly given heroTag , then it gives default heroTag. And that’s the problem, flutter gave my two FABs identical(default) heroTags . Hence the conflict.

During navigating to different screen (page routing) framework looks for Hero widgets with help of Hero Tags. Now the two FABs have same hero tags (default), it caused the conflict.

Solution

Simple !!

If you don’t want hero animations like I didn’t want it , just set hero Tag null

And you will get your FABs in your next page.

If you want hero animations and more than two FABs also , just give different hero Tags . Like 0 to FAB1 and 1 to FAB2 and you will get your lovely Hero animations too.

Hope it helped. And if you like it then 👏 , till then keep fluttering

Kampaiii 🍺 !!