How to achieve card switching effect in Flutter?

In Flutter, you can achieve a card switching effect by using the PageView component. Here is a simple example code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CardSwitcher(),
    );
  }
}

class CardSwitcher extends StatefulWidget {
  @override
  _CardSwitcherState createState() => _CardSwitcherState();
}

class _CardSwitcherState extends State<CardSwitcher> {
  PageController _pageController;
  int _currentIndex = 0;

  @override
  void initState() {
    _pageController = PageController(initialPage: _currentIndex);
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Card Switcher'),
      ),
      body: PageView(
        controller: _pageController,
        onPageChanged: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        children: [
          Card(
            color: Colors.red,
            child: Center(
              child: Text('Card 1',
                  style: TextStyle(fontSize: 24, color: Colors.white)),
            ),
          ),
          Card(
            color: Colors.blue,
            child: Center(
              child: Text('Card 2',
                  style: TextStyle(fontSize: 24, color: Colors.white)),
            ),
          ),
          Card(
            color: Colors.green,
            child: Center(
              child: Text('Card 3',
                  style: TextStyle(fontSize: 24, color: Colors.white)),
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
            _pageController.animateToPage(
              _currentIndex,
              duration: Duration(milliseconds: 500),
              curve: Curves.ease,
            );
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Card 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Card 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'Card 3',
          ),
        ],
      ),
    );
  }
}

In the example code above, we use the PageView component to display cards and control their switching through the PageController. By setting the onPageChanged callback function, we can update the current selected item in the bottom navigation bar when switching cards. By clicking on the options in the bottom navigation bar, we can trigger an animation to switch to the corresponding card.