Search code examples
fluttertabbarflutter-appbar

How to change the icons in the actions property of an appbar according to the tabbar?


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Browse"),
        backgroundColor: Colors.grey[900],
        actions: [],
        bottom: TabBar(controller: _tabController, tabs: const <Widget>[
          Tab(text: "Tab 1"),
          Tab(text: "Tab 2"),
          Tab(text: "Tab 3"),
        ]),
      ),
    );
  }
}

How can i display different icons on the appbar according to the tab selected? i am new to flutter so i am sorry if i am missing something basic.

actions: [
          TabBarView(
            controller: _tabController,
            children: const <Widget>[
              Icon(Icons.person),
              Icon(Icons.settings),
              Icon(Icons.info)
            ],
          ),
        ],

I tried this but the app just gets frozen when i tried this


Solution

  • @Vignesh Please use the tab index and replace the provided code within the app bar actions.

     actions: <Widget>[
            _getTabIcon(_tabController.index),
          ],
    
    Widget _getTabIcon(int tabIndex) {
      switch (tabIndex) {
        case 0:
          return Icon(Icons.person);
        case 1:
          return Icon(Icons.settings);
        case 2:
          return Icon(Icons.info);
        default:
          return Container(); // Return an empty container or a default icon for unknown tabs.
      }
    }
    

    I hope this will be helpful!