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

42 views Asked by At
  @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

1

There are 1 answers

2
WebDesk Solution On BEST ANSWER

@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!