floatingActionButton remains visible after navigation to other routes/pages

[teknolojia]

Good work guys I like this lib but I faced this bug where floatingActionButton remains visible despite bottomBar being hidden in previous route.

here is the code.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SpeedDialController _controller = SpeedDialController();

  @override
  Widget build(BuildContext context) {

    return DefaultTabController(
        length: 4,
        child: Scaffold(
            body: CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                  snap: false,
                  floating: false,
                  pinned: true,
                  expandedHeight: 160.0,
                ),
                SliverFillRemaining(
                  child: TabBarView(
                    children: <Widget>[
                      Activities(),
                    ],
                  ),
                )
              ],
            ),
            bottomNavigationBar: BottomAppBar(
              shape: CircularNotchedRectangle(),
              child: TabBar(
                tabs: <Widget>[
                ////OTHER TABS HERE
                  Tab(
                    //text: 'Activities',
                    icon: Icon(Icons.whatshot),
                  )
                ],
              ),
            ),
            floatingActionButtonLocation:
                FloatingActionButtonLocation.centerDocked,
            floatingActionButton: _buildFloatingActionButton()));
  }

  Widget _buildFloatingActionButton() {
    final TextStyle customStyle =
        TextStyle(inherit: false, color: Colors.black);
    final icons = [
      SpeedDialAction(
          child: Icon(Icons.send), label: Text('MENU 1', style: customStyle)),
      SpeedDialAction(
          child: Icon(Icons.arrow_downward),
          label: Text('MENU 2', style: customStyle)),
    ];

    return SpeedDialFloatingActionButton(
      actions: icons,
      childOnFold: Icon(Icons.menu, key: UniqueKey()),
      screenColor: Colors.black.withOpacity(0.3),
      childOnUnfold: Icon(Icons.close),
      useRotateAnimation: false,
      onAction: _onSpeedDialAction,
      controller: _controller,
      isDismissible: true,
      //backgroundColor: Colors.yellow,
      //foregroundColor: Colors.blue,
    );
  }

  _onSpeedDialAction(int selectedActionIndex) {
    if (selectedActionIndex == 0) {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SelectContacts()),
      );
    }
  }
}

screenshots

[Shiba-Kar]

Facing the same Issue

[unknownaloy]

Is there a fix for this yet? I'm facing the same issue. A patch for this issue will be greatly appreciated.

[guillermin]

I am also facing this issue. I wrestled with it a bit last night to see if I could fix it but ended up deciding on using flutter_speed_dial instead.

If someone is interested in fixing this issue, here are some pointers:

• It is always visible on top because it uses the Flutter Overlay class.
• The Overlay is handled by the OverlayBuilder Stateful Widget, which has showOverlay and hideOverlay methods that can be used to show/hide the Overlay.
• To make the widget aware of route changes it has to implement the RouteAware interface, and somehow receive the RouteObserver object that is assigned to the MaterialApp navigatorObservers. (This is what put me off from fixing it, since I would have to pass the routeObserver variable all the way to the OverlayBuilder object).

If it were possible to register a routeObserver from within this package, or somehow read it without having to pass it down... On the other hand, perhaps using Overlay for this is just not the best way...