I want to use fancy bottom navigation in flutter. When i switch between tabs, it is showing the tab switching only at the navigation bar but, The body is not switching. It is not showing another tabs as i switch. Here's my code

return Scaffold(
  body: _getPage(currentPage),
   bottomNavigationBar: FancyBottomNavigation(
          key: bottomNavigationKey,
          tabs: [
            TabData(iconData: Icons.home,title: 'Home'),
            TabData(iconData: Icons.search, title: 'Search'),
            TabData(iconData: Icons.person, title: 'Profile'),
          ],
          onTabChangedListener:   (position){
            setState(() {
              currentPage = position;
              final FancyBottomNavigationState fState =
                  bottomNavigationKey.currentState;
              fState.setPage(position);
              print('currentPage = $currentPage');
            });
          },
        )
);

_getPage(int page){
  switch(page) {
    case 0:
      return Page1();
    case 1:
      return Search();
    case 2:
      return Profile();
  }
}


Solution 1: Nicolas Klein

You don't need the GlobalKey here. It is enough to just set the currentPage value in the setState.

The Dev Nathan Withers writes here that the key prop defaults to null and is only used for Programmatic Selection of tabs. This special use case is only relevant if you want to change tabs by not clicking on the actual buttons. You don't need this feature. You can check out the example at line 48 to 50 for an actual use-case for the key prop.

Also examine if an IndexedStack suits you. It saves the pages state. You're _getPage() method destroys and builds each page new on each switch.

I put everything together in this example:

class _HomePageState extends State<HomePage> {
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: false,
        child: IndexedStack(
          index: _currentPage,
          children: [StartView(), AllServicesView()],
        ),
      ),
      bottomNavigationBar: FancyBottomNavigation(
        tabs: [
          TabData(iconData: Icons.home,title: 'Home'),
          TabData(iconData: Icons.search, title: 'Search'),
        ],
        onTabChangedListener: (position){
          setState(() {
            _currentPage = position;
            print('currentPage = $_currentPage');
          });
        },
      )
    );
  }