探索 FlutterRocks 的 Page Transformer：打造动态页面转换的神器！

import 'package:flutter/material.dart';
import 'package:flutter_page_transformer/flutter_page_transformer.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  PageController _pageController;
  int _currentPage = 0;
 
  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: _currentPage);
  }
 
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageTransformer(
        pageController: _pageController,
        // 使用 Builder 函数来创建页面视图
        builder: (context, index) {
          // 创建不同的页面视图
          switch (index) {
            case 0:
              return Center(child: Text('Page 1', style: TextStyle(fontSize: 20.0)));
            case 1:
              return Center(child: Text('Page 2', style: TextStyle(fontSize: 20.0)));
            case 2:
              return Center(child: Text('Page 3', style: TextStyle(fontSize: 20.0)));
            default:
              return Container();
          }
        },
        // 设置页面变换样式
        transformer: new PageTransformerBuilder(
          // 设置每个页面变换的动画
          builder: (Widget child, TransformInfo info) {
            return new Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateX(info.position * math.pi / 2)
              ..translate(
                -1.0 * math.pow(info.position, 2),
                100.0 * info.position,
              );
          },
        ),
      ),
    );
  }
}

这个代码示例展示了如何使用 FlutterRocks 的 flutter_page_transformer 包来创建一个带有自定义页面变换动画的页面视图。代码中定义了一个 HomePage 类，它有一个 PageController 和一个 PageTransformer，后者使用 PageTransformerBuilder 来为每个页面应用一个自定义的 3D 旋转动画。这个例子可以教会开发者如何利用 PageTransformer 创建引人注目的页面切换效果。