I'm trying to make the change in tabView with a fade out/fade in animation like for example WhatsApp.

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

  final List<Widget> _tabViews = [
    CupertinoTabView(
      builder: (context) => const HomePage(),
    ),
    CupertinoTabView(
      builder: (context) => const ChatBotPage(),
    ),
    CupertinoTabView(
      builder: (context) => const Center(child: Text('Settings'),),
    )
  ];

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

class _MyCupertinoAppHomePageState extends State<MyCupertinoAppHomePage> {
  int _selectedIndex = 0;

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

  _bottomTabBar() {
    return CupertinoTabBar(
      currentIndex: _selectedIndex,
      onTap: _onTabChanged,
      activeColor: CupertinoColors.activeBlue,
      items: const <BottomNavigationBarItem>[
        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 build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CupertinoTabScaffold(
        tabBar: _bottomTabBar(),
        tabBuilder: (BuildContext context, int index) {
          return AnimatedSwitcher(
            duration: const Duration(microseconds: 400),
            child: widget._tabViews[index],
          );
        },
      ),
    );
  }
}

However, the provided code will not do any kind of animation and will just switch the tabs like it will normally do (without any animation).
There are no error messages in the debugger at all.

Using the following code will give me the desired animation, however they will only work once the tab was opened the first time (meaning the tabView needs to be initialized first before the animations can work?)

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

  final List<Widget> _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<MyCupertinoAppHomePage> createState() => _MyCupertinoAppHomePageState();
}

class _MyCupertinoAppHomePageState extends State<MyCupertinoAppHomePage> {
  int _selectedIndex = 0;

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

  _tabBarView() {
    return AnimatedSwitcher(
        duration: const Duration(milliseconds: 500),
        child: widget._tabViews[_selectedIndex]);
  }

  _bottomTabBar() {
    return CupertinoTabBar(
      currentIndex: _selectedIndex,
      onTap: _onTabChanged,
      activeColor: CupertinoColors.activeBlue,
      items: const <BottomNavigationBarItem>[
        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 build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CupertinoTabScaffold(
        tabBar: _bottomTabBar(),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoPageScaffold(
            child: _tabBarView(),
          );
        },
      ),
    );
  }
}

Also, in the second variant, the widget tree of the flutter inspector shows three different CupertinoPageScaffold's with each their own AnimatedSwitcher and own Pages in the widget._tabView list, which doesn't sound quite correct to me.

here you can see the widget tree at startup of the app.
here you can see the widget tree after each tab was opened once.

So to keep it short, my goal is to archive the animation that the second code will do, but in a 'correct' way.
thank you in advance