在實際開發(fā)過程中纯衍，我們需要在頁面跳轉的時候添加一些有特色的動畫效果，讓頁面看起來比較炫酷苗胀。

1襟诸、main.dart，它里面主要就是放置一個FirstPage的組件柒巫。

import 'package:flutter/material.dart';
import 'pages.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: FirstPage(),
    );
  }
}

2励堡、pages.dart，它里面就是創(chuàng)建一個FirstPage,然后在FirstPage中放置一個icon堡掏，點擊icon進入SecondPage应结。
AppBar Widger的 elevation 屬性：設置這個屬性的值越大導航欄與頁面之間的陰影越大，一般有滾動時默認是4.0，如果設置成0.0就沒有陰影效果鹅龄。

import 'package:flutter/material.dart';
import 'package:flutterc03/customer_router.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text('First Page',
        style: TextStyle(fontSize:36.0 ),),
        elevation: 4.0, //
      ),
      body: Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_next,
            color: Colors.white70,
            size: 64.0,
          ),
          onPressed: (){
            Navigator.of(context).push(CustomerRoute(SecondPage()));
//            Navigator.of(context).push(MaterialPageRoute(
//              builder: (BuildContext context){
//                return SecondPage();
//            }));
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pinkAccent,
      appBar: AppBar(
        elevation: 4.0,
        backgroundColor: Colors.pinkAccent,
        title: Text('Second Page',style: TextStyle(fontSize: 36),),
      ),
      body: Center(
        child: MaterialButton(
          child: Icon(
            Icons.navigate_before,
            color: Colors.white70,
            size: 64.0,
          ),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

3揩慕、customer_router.dart,自定義路由，通過自定義動畫效果實現頁面跳轉時的炫酷動畫扮休。代碼中演示了四種不同的效果迎卤。逐漸消失的動畫效果、縮放的動畫效果玷坠、旋轉加縮放的動畫效果蜗搔、左右滑動的動畫效果。

import 'package:flutter/material.dart';

class CustomerRoute extends PageRouteBuilder {
  final Widget widget;
  CustomerRoute(this.widget)
  :super(
    transitionDuration: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 FadeTransition(
//        opacity: Tween(begin: 0.0,end: 1.0) //設置不透明度
//        .animate(CurvedAnimation(
//            parent: animation1,
//            curve: Curves.fastOutSlowIn)
//        ),
//      child: 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,
      );
    }
  );
}