20個Flutter實例視頻教程-第05節: 酷炫的路由動畫-1

視屏地址：

https://www.bilibili.com/video/av39709290/?p=5

博客地址：

https://jspang.com/post/flutterDemo.html#toc-246

 

建立新項目：

 

把上節課的Main.dart文件複製過來改改。

 

建立pages.dart

 

stless快速生成咱們的FirstPage頁面。靜態的widget

 

 

 

而後咱們去建立的SecondPage頁面

stlss快速生成：SecondPage

 

 

這樣AppBar就設置完成了。

下面設置咱們的Body，直接複製FirstPage的Center的代碼過來進行修改便可。

Navigator.of(context).pop();//這裏直接pop就是返回

運行效果

 

點擊圖標打開第二頁

第二頁的效果

 

 

咱們看到AppBar有個凸起的效果：就是由於咱們設置的 elevation: 4.0,

 

咱們把elevation: 都設置爲0.0

 

appBar就徹底的融合了

 

新建

 

繼承頁面構造器。重寫方法

transitionDuration是過渡時間

而後重寫頁面的構造器pageBuilder

 

動畫的關鍵都在transitionBuilder實現

 

在pages裏面引入custome_router.dart

 

這樣咱們在挑戰的時候調用：CustomeRoute並傳入SecondPage

 

頁面預覽：

效果沒有實現。通常出現這種問題就是在過渡方法裏面沒有寫child

 

這樣就有了過渡的動畫效果

 

這裏能夠修改過渡時間爲2秒。這樣能看的更明顯一些。

 

代碼：

import 'package:flutter/material.dart';
import 'pages.dart';


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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,//裏面定義了不少的主題,這裏使用亮藍色
      ),
      home:FirstPage()
    );
  }
}

main.dart

 

 

import 'package:flutter/material.dart';
import 'custome_router.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,//和底部的融合 默認是4.0
      ),
      body: Center(
        child:MaterialButton(
          child: Icon(
            Icons.navigate_next,
            color: Colors.white,
            size: 64.0,
          ),
          onPressed: (){
            Navigator.of(context).push(CustomeRoute(SecondPage()));
          },
        ),
      ),
    );
  }
}
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(),//使再提放在中間，只須要放個Container就能夠了
        elevation: 0.0,
      ),
      body: Center(
        child:MaterialButton(
          child: Icon(
            Icons.navigate_before,
            color: Colors.white,
            size: 64.0,
          ),
          onPressed: (){
            Navigator.of(context).pop();//這裏直接pop就是返回
          },
        ),
      ),
    );
  }
}

pages.dart

 

 

import 'package:flutter/material.dart';

class CustomeRoute extends PageRouteBuilder{
  final Widget widget;
  CustomeRoute(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.10)
        //   .animate(CurvedAnimation(
        //     parent:animation1,//這裏也能夠隨便傳值，默認就是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,
        );
      }
    );
}

custome_router.dart