[Flutter]: FAB for only one bottom tab-CodePudding

I have a BottomAppBar that has a FloatingActionButton. However, I only want this button to be seen in one particular screen. In the best case, I'd like to add this button only when the user clicks on that particular screen.

I've found that you can add a FAB like this:

return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ...
        },
        child:  const Icon(
          Icons.add_sharp,
          color: Color(0xFFFFFFFF),
        ),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: buildBottomNavigationBar(),
    );

However, as you can see this Scaffold is shared by all the screens that can be selected in the bottomNavigationBar. How do I add a FAB only for a particular screen?

I'd like the FAB to be embedded into the bottomNavigationBar so I do not want to add a plain button to that particular screen. Thanks.

CodePudding user response：

Wrap that specific screen with scaffold again and use fab on that screen only.

CodePudding user response：

Use Stack In your Specific Tab and Add FAB at the bottom :

Example :

    Stack(
children[
    
    Container(height: double.infinity,
    width: double.infinity) // for full screen 
    
    Position(
    bottom : 10,
    left: 150,
    right : 150,
    child: FloatingActionButton(
            onPressed: () {
              ...
            },
            child:  const Icon(
              Icons.add_sharp,
              color: Color(0xFFFFFFFF),
            ),
          )
    )
    
    ])