CODEWITHSUNDEEP
flutter
Daniel Mana
Daniel Mana

Reputation: 10411

floatingactionbutton show/hide on different tabs

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.

Upvotes: 7

Views: 10441

Answers (4)

kahan x10
kahan x10

Reputation: 285

The easiest way is to just give your each tab it's own Scaffold as the top widget, and provide it's own FAB there (Instead of the Scaffold where each tabs are kept, the main Scaffold, place it individually inside every tab's Scaffold, and remove from the top Scaffold). If you already have one, you can wrap it inside another. But if you want to keep the FAB the same in every other screen except some, you then can follow other solutions written here.

Upvotes: 1

Joey Wong
Joey Wong

Reputation: 84

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(...)
     )
)

Upvotes: 0

yorek
yorek

Reputation: 156

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,
    );
  }
}

Upvotes: 14

SHRAVAN KUMAR
SHRAVAN KUMAR

Reputation: 51

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

Upvotes: 5

Related Questions