flutter 路由动画

Posted 2022-08-22 loaderman

import ‘package:flutter/material.dart‘;
import ‘package:flutter_app/pages/FirstPage.dart‘;

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

class MyApp extends StatelessWidget 

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: ‘Flutter Demo‘,
      theme: ThemeData(
        primarySwatch: Colors.green,  //定义主题风格    primarySwatch
      ),
      home: FirstPage(),
    );
  

import ‘package:flutter/material.dart‘;
import ‘package:flutter_app/CustomRoute.dart‘;
import ‘package:flutter_app/pages/SecondPage.dart‘;


class FirstPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        backgroundColor: Colors.blue,
        appBar:AppBar(
          title:Text(‘FirstPage‘,style: TextStyle(fontSize: 36.0)),
          elevation: 0.0,
        ),
        body:Center(
          child: MaterialButton(
            child: Icon(
              Icons.navigate_next,
              color:Colors.white,
              size:64.0,
            ),
            onPressed: ()
              Navigator.of(context).push(
                  CustomRoute(SecondPage())); //使用自定义路由动画

            ,
          ),
        )
    );
  

import ‘package:flutter/material.dart‘;
class SecondPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        backgroundColor: Colors.pinkAccent,
        appBar: AppBar(
          title: Text(‘SecondPage‘,style:TextStyle(fontSize:36.0),),
          backgroundColor: Colors.pinkAccent,
          leading:Container(),
          elevation: 0.0,
        ),
        body:Center(
          child: MaterialButton(
            child: Icon(
                Icons.navigate_before,
                color:Colors.white,
                size:64.0
            ),
            onPressed: ()=>Navigator.of(context).pop(),
          ),
        )
    );
  

import ‘package:flutter/material.dart‘;

class CustomRoute extends PageRouteBuilder 
  final Widget widget;

  CustomRoute(this.widget)
      : super(
            transitionDuration: const Duration(seconds: 1),
            pageBuilder: (BuildContext context, Animation<double> animation1,
                Animation<double> animation2) 
              return widget;
            ,
            transitionsBuilder: (BuildContext context,
                Animation<double> animation1,
                Animation<double> animation2,
                Widget child) 
              //缩放
//        return ScaleTransition(
//            scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
//                parent:animation1,
//                curve: Curves.fastOutSlowIn
//            )),
//            child:child
//        );
              //旋转+缩放路由动画
//        return RotationTransition(
//            turns:Tween(begin:0.0,end:1.0)
//                .animate(CurvedAnimation(
//                parent: animation1,
//                curve: Curves.fastOutSlowIn
//            )),
//            child:ScaleTransition(
//              scale:Tween(begin: 0.0,end:1.0)
//                  .animate(CurvedAnimation(
//                  parent: animation1,
//                  curve:Curves.fastOutSlowIn
//              )),
//              child: child,
//            )
//        );
              //左右滑动路由动画
//              return SlideTransition(
//                position: Tween<Offset>(
//                        begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0))
//                    .animate(CurvedAnimation(
//                        parent: animation1, curve: Curves.fastOutSlowIn)),
//                child: child,
//              );

        return FadeTransition(
          opacity: Tween(begin:0.0,end :1.0).animate(CurvedAnimation(
              parent:animation1,
              curve:Curves.fastOutSlowIn
          )),
          child: child,
        );
            );

效果：