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