gpt4 book ai didi

Flutter - 具有 3D 效果的页面之间的过渡

转载 作者:行者123 更新时间:2023-12-02 18:22:17 24 4
gpt4 key购买 nike

如何在具有 3D/Cube 效果的页面之间进行转换?我需要这样的过渡 enter image description here

最佳答案

enter image description here

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 效果的页面之间的过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59649977/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com