Allow Multiple FAB buttons (i.e flutter_speed_dial)

[egenita]

Hi,

How can we achieve to have multiple FAB buttons (i.e integrating or using other framework).
It has weird screen, please see the screenshot below.

Thanks.

[ciriousjoker]

Isn't the FAB completely separate from this package? ie you can use any FAB with this package

[westdabestdb]

Use that multiple fab package in position of FAB in my package. Cheers.

[Fauzdar1]

Just implemented a solution for this.

As I had invented a design of Fab and BottomNav in Kotlin, I knew this messed-up Bezier curve was result of missing size/constraints, and As the default fab was working and this one wasn't, I looked at default Fab's code and found out that it was using ContrainedBox with width and height of 56.0.

So, the solution was to wrap the Flutter codebook's ExpandableFab in a ContrainedBox as mentioned below:

ConstrainedBox(
      //This is the BoxConstraints of default Fab.
      constraints: const BoxConstraints.tightFor(width: 56, height: 56),
      child: SizedBox.expand(
        child: Stack(
          alignment: Alignment.bottomRight,
          clipBehavior: Clip.none,
          children: [
            _buildTapToCloseFab(),
            ..._buildExpandingActionButtons(),
            _buildTapToOpenFab(),
          ],
        ),
      ),
    );

This solution is to prevent what happened with you in the screenshot and will work with any other Fab showing up like this.

Edit After 19 days:

It works, but, this ContrainedBox will prevent clicking the Expandable buttons shown when the fab is pressed. The click events will go through the Extra buttons like they aren't there and whatever widget is behind the buttons will register the click. And, both of this messed up background and unclickable buttons happen with the default BottomAppBar too. The only solution I've come up with after wasting a day, is to use a custom Popup menu instead, works like charm.