Flutter页面过渡动画插件cube_transition_plus的使用

Flutter页面过渡动画插件cube_transition_plus的使用

插件介绍

cube_transition 是一个用于在 PageView 和 PageRoute 之间添加3D立方体过渡效果的插件。它提供了多种自定义选项，如控制立方体的缩放、旋转等。

安装插件

首先，在你的Flutter项目中添加依赖项：

dependencies:
  cube_transition: "^1.0.0"

然后运行 flutter packages upgrade 或者在IntelliJ中更新包。

示例代码

下面是一个完整的示例项目，展示了如何使用cube_transition插件实现不同的过渡效果。

import 'package:flutter/material.dart';
import 'sample1.dart';
import 'sample2.dart';
import 'sample3.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  void _onTap(BuildContext context, Widget page) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (_) => page,
    ));
  }

  @override
  Widget build(BuildContext context) {
    const separator = SizedBox(height: 15);
    return Scaffold(
      appBar: AppBar(
        title: Text("Examples"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text("Navigator Cube Transition"),
              onPressed: () => _onTap(context, Sample1()),
            ),
            separator,
            RaisedButton(
              child: Text("PageView Cube Transition"),
              onPressed: () => _onTap(context, Sample2()),
            ),
            separator,
            RaisedButton(
              child: Text("PageView Cube Transition Custom"),
              onPressed: () => _onTap(context, Sample3()),
            ),
          ],
        ),
      ),
    );
  }
}

示例说明

1. Navigator Cube Transition

   • 示例 Sample1 展示了如何在导航器之间使用立方体过渡。

   class Sample1 extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Navigator Cube Transition'),
         ),
         body: Center(
           child: RaisedButton(
             child: Text('Next Page'),
             onPressed: () {
               Navigator.of(context).push(
                 CubePageRoute(
                   enterPage: SampleNextPage(),
                   exitPage: this,
                   duration: const Duration(milliseconds: 900),
                 ),
               );
             },
           ),
         ),
       );
     }
   }
   

   • 这个示例创建了一个简单的的导航器，并在点击按钮时触发立方体过渡。

2. PageView Cube Transition (default)

   • 示例 Sample2 展示了默认的立方体过渡效果。

   class Sample2 extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       final height = MediaQuery.of(context).size.height / 2;
       return Scaffold(
         appBar: AppBar(
           title: Text('PageView Cube Transition'),
         ),
         body: Center(
           child: SizedBox(
             height: height,
             child: CubePageView(
               children: places.map((item) >> Image.network(item.url, height: height, fit: BoxFit.cover)).toList(),
             ),
           ),
         ),
       );
     }
   }
   

   • 这个示例展示了一个简单的的 PageView，其中每个条目都会进行立方体过渡。

3. PageView Cube Transition Custom

   • 示例 Sample3 展示了自定义立方体过渡效果。

   class Sample3 extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       final height = MediaQuery.of(context).size.height / 2;
       return Scaffold(
         appBar: AppBar(
           title: Text('Custom Cube Transition'),
         ),
         body: Center(
           child: SizedBox(
             height: height,
             child: CubePageView.builder(
               itemCount: places.length,
               itemBuilder: (context, index, notifier) {
                 final item = places[index];
                 final transform = Matrix4.identity();
                 final t = (index - notifier).abs();
                 final scale = lerpDouble(1.5, 0, t);
                 transform.scale(scale, scale);
                 return CubeWidget(
                   index: index,
                   pageNotifier: notifier,
                   child: Stack(
                     children: [
                       Image.network(item.url, height: height, fit: BoxFit.cover),
                       Transform(
                         alignment: Alignment.center,
                         transform: transform,
                         child: Center(
                           child: Padding(
                             padding: EdgeInsets.all(12.0),
                             child: Container(
                               decoration: BoxDecoration(boxShadow: [
                                 BoxShadow(color: Colors.black45, spreadRadius: 5, blurRadius: 5),
                               ]),
                               child: Text(
                                 item.name.split('-').join('\n'),
                                 textAlign: TextAlign.center,
                                 style: Theme.of(context).textTheme.title,
                               ),
                             ),
                           ),
                         ),
                       ),
                     ],
                   ),
                 );
               },
             ),
           ),
         ),
       );
     }
   }