floatingactionbutton show/hide on different tabs

Question

In fluter, I have 2 tab pages that show different view. I wanted to have the floatingactionbutton to show only in one of the view and hidden in other tabs. But the floatingactionbutton stays floating even when the view is switched. Can anyone help me on this? If there is any code or tutorial, it would be appreciated.

Answer 1

demo pic:
tab1 show fab
tab2 hide fab

You can set floatingActionButton to null when _selectedIndex == 0, then FAB is gone with animation, so cool. And remember to change _selectedIndex in BottomNavigationBar onTap method.

Here is the example code with some comments:

final _tabTitle = [
  'Title 1',
  'Title 2'
]; // BottomNavigationBarItem title

final _tabIcon = [
  Icon(Icons.timer_off),
  Icon(Icons.timeline),
]; // BottomNavigationBarItem icon

class _MyHomePageState extends State<MyHomePage> {

  int _selectedIndex = 0;
  String title = _tabTitle[0];

  // tap BottomNavigationBar will invoke this method
  _onItemTapped(int index) {
    setState(() {
      // change _selectedIndex, fab will show or hide
      _selectedIndex = index;      
      // change app bar title     
      title = _tabTitle[index];
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: Center(
        child: Text(_tabTitle[_selectedIndex]),
      ),
      // two tabs
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(title: Text(_tabTitle[0]), icon: _tabIcon[0]),
          BottomNavigationBarItem(title: Text(_tabTitle[1]), icon: _tabIcon[1])
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
      // key point, fab will show in Tab 0, and will hide in others.
      floatingActionButton: _selectedIndex == 0 ? FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ) : null,
    );
  }
}

Answer 2

You can create a list of FloatingActionButtons for each page. Call index method on the TabController variable to know the index of the tab that is active and use that to select a fab from the list. Don't forget to call addListener on the TabController variable.

here is snippet code of how I did it:

// in the main statefulwidget class

 TabController tabController;
 var fabIndex;
 @override
 void initState() {
   super.initState();
   tabController = new TabController(length: 3, vsync: this,initialIndex: 0);
   tabController.addListener(_getFab);
   fabIndex=0;
 }

 void dispose() {
   tabController.dispose();
   super.dispose();
 }

final List<FloatingActionButton> fabs=[
  new FloatingActionButton(child: new Icon(Icons.access_time),onPressed: (){},),
  new FloatingActionButton(child: new Icon(Icons.account_balance),onPressed: (){},),
  new FloatingActionButton(child: new Icon(Icons.add_alert),onPressed: (){},)
];

void _getFab(){
  setState((){`enter code here`
    fabIndex=tabController.index;
  });
}

Use the fabIndex in the scaffold's floatingActionButton property as follows:

  floatingActionButton: fabs[fabIndex],