Flutter（翻页视图）：如何使用flip_board包创建中间翻页视图？

1. 添加依赖 #

首先在pubspec.yaml中引入flip_board包，替换为pub.dev上的最新版本号：

dependencies:
  flip_board: ^1.0.0 # 替换为最新版本

2. 核心实现代码 #

以下是完整的示例代码，实现类似动图中的中间翻页效果，支持多页面切换+单页翻转动画：

import 'package:flutter/material.dart';
import 'package:flip_board/flip_board.dart';

class MidFlipPageView extends StatefulWidget {
  const MidFlipPageView({super.key});

  @override
  State<MidFlipPageView> createState() => _MidFlipPageViewState();
}

class _MidFlipPageViewState extends State<MidFlipPageView> {
  final PageController _pageController = PageController(initialPage: 0);
  final List<Map<String, dynamic>> _pageData = [
    {'text': '首页', 'frontColor': Colors.cyan, 'backColor': Colors.lightBlue},
    {'text': '发现', 'frontColor': Colors.orange, 'backColor': Colors.deepOrange},
    {'text': '我的', 'frontColor': Colors.purple, 'backColor': Colors.deepPurple},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('中间翻页视图')),
      body: Center(
        child: SizedBox(
          width: MediaQuery.of(context).size.width * 0.85,
          height: MediaQuery.of(context).size.height * 0.65,
          child: PageView.builder(
            controller: _pageController,
            itemCount: _pageData.length,
            itemBuilder: (context, index) {
              final data = _pageData[index];
              return FlipBoard(
                front: _buildPageCard(data['text'], data['frontColor']),
                back: _buildPageCard(data['text'], data['backColor']),
                direction: FlipDirection.right,
                flipOnTouch: true,
                duration: const Duration(milliseconds: 600),
              );
            },
          ),
        ),
      ),
    );
  }

  Widget _buildPageCard(String text, Color color) {
    return Container(
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(16),
        boxShadow: const [
          BoxShadow(
            color: Colors.black38,
            blurRadius: 10,
            offset: Offset(3, 3),
          )
        ],
      ),
      child: Center(
        child: Text(
          text,
          style: const TextStyle(
            fontSize: 32,
            color: Colors.white,
            fontWeight: FontWeight.w700,
          ),
        ),
      ),
    );
  }
}

3. 关键配置说明 #

• PageView + FlipBoard组合：用PageView实现多页面的横向切换框架，每个页面嵌套FlipBoard组件实现单页的翻转动画
• FlipBoard核心属性：
  • front/back：分别设置翻页的正面和反面Widget，支持任意自定义布局
  • direction：设置翻页方向，FlipDirection.right对应动图中的横向翻页，也可设置up/down实现纵向翻页
  • flipOnTouch：设为true时，点击页面即可触发翻转动画
  • duration：自定义翻页动画的时长

4. 进阶优化：滑动联动翻页 #

如果需要实现滑动页面时自动触发翻转动画，可以通过GlobalKey控制FlipBoard的状态：

// 声明GlobalKey
final GlobalKey<FlipBoardState> _flipKey = GlobalKey();

// 在itemBuilder中给FlipBoard绑定key
FlipBoard(
  key: _flipKey,
  // ...其他属性
)

// 在PageView的onPageChanged回调中触发翻页
onPageChanged: (index) {
  _flipKey.currentState?.flip();
},

内容的提问来源于stack exchange，提问作者Ritik Rai