ios – flutter change CupertinoTabView with animation

I am making an attempt to make the change in tabView with a fade out/fade in animation like for instance WhatsApp.

class MyCupertinoAppHomePage extends StatefulWidget {
  MyCupertinoAppHomePage({tremendous.key});

  closing Checklist _tabViews = [
    CupertinoTabView(
      builder: (context) => const HomePage(),
    ),
    CupertinoTabView(
      builder: (context) => const ChatBotPage(),
    ),
    CupertinoTabView(
      builder: (context) => const Center(child: Text('Settings'),),
    )
  ];

  @override
  State createState() => _MyCupertinoAppHomePageState();
}

class _MyCupertinoAppHomePageState extends State {
  int _selectedIndex = 0;

  void _onTabChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  _bottomTabBar() {
    return CupertinoTabBar(
      currentIndex: _selectedIndex,
      onTap: _onTabChanged,
      activeColor: CupertinoColors.activeBlue,
      objects: const [
        BottomNavigationBarItem(
          icon: Icon(
            CupertinoIcons.arrow_up_arrow_down_circle_fill
          ), 
          label: 'Exchange'
        ),
        BottomNavigationBarItem(
          icon: Icon(
            CupertinoIcons.bubble_left_bubble_right_fill
          ),
          label: 'Chat'
        ),
        BottomNavigationBarItem(
          icon: Icon(
            CupertinoIcons.settings
          ),
          label: 'Settings'
        ),
      ],
    );
  }

  @override
  Widget construct(BuildContext context) {
    return CupertinoPageScaffold(
      youngster: CupertinoTabScaffold(
        tabBar: _bottomTabBar(),
        tabBuilder: (BuildContext context, int index) {
          return AnimatedSwitcher(
            period: const Period(microseconds: 400),
            youngster: widget._tabViews[index],
          );
        },
      ),
    );
  }
}

Nevertheless, the offered code is not going to do any form of animation and can simply swap the tabs like it is going to usually do (with none animation).
There are not any error messages within the debugger in any respect.

Utilizing the next code will give me the specified animation, nevertheless they may solely work as soon as the tab was opened the primary time (that means the tabView must be initialized first earlier than the animations can work?)

class MyCupertinoAppHomePage extends StatefulWidget {
  MyCupertinoAppHomePage({tremendous.key});

  closing Checklist _tabViews = [
    Container(
      key: const ValueKey(0),
      child: const HomePage(),
    ),
    Container(
      key: const ValueKey(1),
      child: const CHatBotPage(),
    ),
    Container(
      key: const ValueKey(2),
      child: const Center(
        child: Text('Settings'),
      ),
    )
  ];

  @override
  State createState() => _MyCupertinoAppHomePageState();
}

class _MyCupertinoAppHomePageState extends State {
  int _selectedIndex = 0;

  void _onTabChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  _tabBarView() {
    return AnimatedSwitcher(
        period: const Period(milliseconds: 500),
        youngster: widget._tabViews[_selectedIndex]);
  }

  _bottomTabBar() {
    return CupertinoTabBar(
      currentIndex: _selectedIndex,
      onTap: _onTabChanged,
      activeColor: CupertinoColors.activeBlue,
      objects: const [
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.arrow_up_arrow_down_circle_fill),
            label: 'Exchange'),
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.bubble_left_bubble_right_fill),
            label: 'Chat'),
        BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.settings), label: 'Settings'),
      ],
    );
  }

  @override
  Widget construct(BuildContext context) {
    return CupertinoPageScaffold(
      youngster: CupertinoTabScaffold(
        tabBar: _bottomTabBar(),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoPageScaffold(
            youngster: _tabBarView(),
          );
        },
      ),
    );
  }
}

Additionally, within the second variant, the widget tree of the flutter inspector reveals three totally different CupertinoPageScaffold’s with every their very own AnimatedSwitcher and personal Pages within the widget._tabView record, which does not sound fairly appropriate to me.

right here you may see the widget tree at startup of the app.
right here you may see the widget tree after every tab was opened as soon as.

So to maintain it brief, my aim is to archive the animation that the second code will do, however in a ‘appropriate’ approach.
thanks upfront