floatingactionbutton show/hide on different tabs

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 titlefinal _tabIcon = [  Icon(Icons.timer_off),  Icon(Icons.timeline),]; // BottomNavigationBarItem iconclass _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,    );  }}

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],

I would wrap the tab you want with a scaffold and give it a fab.

TabBarView(  children:[     Text("tab1"),     Scaffold(body:Text("tab2"),              floatingActionButton: FloatingActionButton(...)     ))