Flutter-具有效果3D的页面之间的过渡 [英] Flutter - Transition between pages with effect 3D

问题描述

如何在具有3D /多维数据集效果的页面之间转换？我需要这种过渡看起来像这样

how can I transition between pages with 3D/Cube effects? I need that transition looks like this

推荐答案

import 'dart:math';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter 3D transition',
        theme: ThemeData(
          backgroundColor: Colors.white,
          primarySwatch: Colors.green,
        ),
        home: Page1());
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[50],
      body: Center(
        child: RaisedButton(
          onPressed: () => Navigator.of(context).pushReplacement(
            Pseudo3dRouteBuilder(this, Page2()),
          ),
          child: Text('change the page'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink[50],
      body: Center(
        child: RaisedButton(
          onPressed: () => Navigator.of(context).pushReplacement(
            Pseudo3dRouteBuilder(this, Page1()),
          ),
          child: Text('change the page'),
        ),
      ),
    );
  }
}

class Pseudo3dRouteBuilder extends PageRouteBuilder {
  final Widget enterPage;
  final Widget exitPage;
  Pseudo3dRouteBuilder(this.exitPage, this.enterPage)
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => enterPage,
          transitionsBuilder: _transitionsBuilder(exitPage, enterPage),
        );

  static _transitionsBuilder(exitPage, enterPage) =>
      (context, animation, secondaryAnimation, child) {
        return Stack(
          children: <Widget>[
            SlideTransition(
              position: Tween<Offset>(
                begin: Offset.zero,
                end: Offset(-1.0, 0.0),
              ).animate(animation),
              child: Container(
                color: Colors.white,
                child: Transform(
                  transform: Matrix4.identity()
                    ..setEntry(3, 2, 0.003)
                    ..rotateY(pi / 2 * animation.value),
                  alignment: FractionalOffset.centerRight,
                  child: exitPage,
                ),
              ),
            ),
            SlideTransition(
              position: Tween<Offset>(
                begin: Offset(1.0, 0.0),
                end: Offset.zero,
              ).animate(animation),
              child: Container(
                color: Colors.white,
                child: Transform(
                  transform: Matrix4.identity()
                    ..setEntry(3, 2, 0.003)
                    ..rotateY(pi / 2 * (animation.value - 1)),
                  alignment: FractionalOffset.centerLeft,
                  child: enterPage,
                ),
              ),
            )
          ],
        );
      };
}

这篇关于Flutter-具有效果3D的页面之间的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！