Flutter 解答 StackOverflow问题 Page transition duration in flutter

 提问的大致意思：页面导航过渡时间。

整理了渐变、缩放、旋转+缩放、滑动

1import 'package:flutter/material.dart';
2
3void main() => runApp(MyApp());
4
5class MyApp extends StatelessWidget {
6  // This widget is the root of your application.
7  @override
8  Widget build(BuildContext context) {
9    return MaterialApp(
10      title: 'Flutter StackOverFlow Page Transition',
11      theme: ThemeData(
12        //设置主题
13        primarySwatch: Colors.green,
14      ),
15      home: Container(
16        child: FirstPage(),
17      ),
18    );
19  }
20}
21
22class FirstPage extends StatelessWidget {
23  @override
24  Widget build(BuildContext context) {
25    return Container(
26        child: Scaffold(
27          backgroundColor: Colors.blue,
28          appBar: AppBar(
29            backgroundColor: Colors.blue,
30            title: Text("First Page"),
31            elevation: 4.0,
32          ),
33
34          body: Center(
35            child: RaisedButton(
36              child: Text("Nav To SecondPage"),
37              onPressed: (){
38                Navigator.push(context, CustomRouteSlide(SecondPage()));
39              },
40            ),
41          ),
42        )
43    );
44  }
45}
46
47class SecondPage extends StatelessWidget {
48  @override
49  Widget build(BuildContext context) {
50    return Container(
51      child: Scaffold(
52        backgroundColor: Colors.green,
53        appBar: AppBar(
54          title: Text("SecondPage"),
55          elevation: 1.0,
56        ),
57      ),
58    );
59  }
60}

渐变效果

1//渐变效果
2class CustomRouteGradient extends PageRouteBuilder{
3  final Widget widget;
4  CustomRouteGradient(this.widget)
5      :super(
6      transitionDuration:const Duration(seconds:1),
7      pageBuilder:(
8          BuildContext context,
9          Animation<double> animation1,
10          Animation<double> animation2){
11        return widget;
12      },
13      transitionsBuilder:(
14          BuildContext context,
15          Animation<double> animation1,
16          Animation<double> animation2,
17          Widget child){
18        return FadeTransition(
19          opacity: Tween(begin:0.0,end :2.0).animate(CurvedAnimation(
20              parent:animation1,
21              curve:Curves.fastOutSlowIn
22          )),
23          child: child,
24        );
25      }
26  );
27}

 缩放效果

1//缩放效果
2class CustomRouteZoom extends PageRouteBuilder{
3  final Widget widget;
4  CustomRouteZoom(this.widget)
5      :super(
6      transitionDuration:const Duration(seconds:1),
7      pageBuilder:(
8          BuildContext context,
9          Animation<double> animation1,
10          Animation<double> animation2){
11        return widget;
12      },
13      transitionsBuilder:(
14          BuildContext context,
15          Animation<double> animation1,
16          Animation<double> animation2,
17          Widget child){
18
19        return ScaleTransition(
20            scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
21                parent:animation1,
22                curve: Curves.fastOutSlowIn
23            )),
24            child:child
25        );
26
27      }
28  );
29}

旋转+缩放效果

1//旋转+缩放效果
2class CustomRouteRotateZoom extends PageRouteBuilder{
3  final Widget widget;
4  CustomRouteRotateZoom(this.widget)
5      :super(
6      transitionDuration:const Duration(seconds:1),
7      pageBuilder:(
8          BuildContext context,
9          Animation<double> animation1,
10          Animation<double> animation2){
11        return widget;
12      },
13      transitionsBuilder:(
14          BuildContext context,
15          Animation<double> animation1,
16          Animation<double> animation2,
17          Widget child){
18
19        return RotationTransition(
20            turns:Tween(begin:0.0,end:1.0)
21                .animate(CurvedAnimation(
22                parent: animation1,
23                curve: Curves.fastOutSlowIn
24            )),
25
26            child:ScaleTransition(
27              scale:Tween(begin: 0.0,end:1.0)
28                  .animate(CurvedAnimation(
29                  parent: animation1,
30                  curve:Curves.fastOutSlowIn
31              )),
32              child: child,
33            )
34        );
35
36      }
37  );
38}

 滑动效果

1//滑动效果
2class CustomRouteSlide extends PageRouteBuilder {
3  final Widget widget;
4
5  CustomRouteSlide(this.widget)
6      :super(
7      transitionDuration: const Duration(seconds: 1),
8      pageBuilder: (BuildContext context,
9          Animation<double> animation1,
10          Animation<double> animation2) {
11        return widget;
12      },
13      transitionsBuilder: (BuildContext context,
14          Animation<double> animation1,
15          Animation<double> animation2,
16          Widget child) {
17        return SlideTransition(
18          position: Tween<Offset>(
19              begin: Offset(-1.0, 0.0),
20              end: Offset(0.0, 0.0)
21          )
22              .animate(CurvedAnimation(
23              parent: animation1,
24              curve: Curves.fastOutSlowIn
25          )),
26          child: child,
27
28        );
29      }
30  );
31}

下载案例：flutter_stackoverflow_page_transition