Animation glitch when mixing FloatingActionButton and ExpandableFab

[aloh86]

I have a Scaffold in which I mix FloatingActionButton and ExpandableFab depending on the screen shown. When I render the screen (through bottom navigation bar switch) that has the ExpandableFab, I see the button moving into position to the bottom right. I'm also setting location based on the screen where I show the ExpandableFab:

Scaffold(
    ...
    floatingActionButton: _getFloatingActionButton(_bottomNavCurrentIndex),
    floatingActionButtonLocation: _getLocation(_bottomNavCurrentIndex),
    ...
)

FloatingActionButtonLocation? _getLocation(int bottomNavCurrentIndex) {
    if (_navItems.length == 4 && _bottomNavCurrentIndex == 2 || _navItems.length == 5 && _bottomNavCurrentIndex == 3) {
      return ExpandableFab.location;
    }

    // Floating action button's default position
    return null;
}

You can see (from the video) that if I go from a screen where ExpandableFab is showing to a screen with a FloatingActionButton, you can momentarily see the FAB in the top left, and then suddenly appear bottom right where it should be. If you go from a screen with FloatingActionButton to a screen with an ExpandableFab, you see the ExpandableFab animate a little offset from where it should be to its final position.

Is there a way to make these two work together?

Screen_recording_20241017_155853.webm

[dimabran]

I have the same issue, and i fixed it by defining the key outside the build method of the widget.

[shashankjat7]

@aloh86, I believe it has to do with the how ExpandableFAB and FloatingActionButton use the Scaffold.floatingActionButtonLocation.
I had the same issue where i was animating between the two based on a condition.
I solved it by setting : Scaffold.floatingActionButtonLocation: ExpandableFAB.location, and then for the FloatingActionButton, wrap it in Align widget with alignment: Alignment.bottomCenter.

I'm not sure if it will work for your specific use case. But cant hurt to try.