视屏地址:

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: ),
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

20个Flutter实例视频教程-第05节: 酷炫的路由动画-1的更多相关文章

  1. 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2

    博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...

  2. 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1

    20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...

  3. 20个Flutter实例视频教程-第13节: 展开闭合案例

    20个Flutter实例视频教程-第13节: 展开闭合案例 视频地址: https://www.bilibili.com/video/av39709290/?p=13 博客地址: https://js ...

  4. 20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1

    第03节: 不规则底部工具栏制作-1 博客地址: https://jspang.com/post/flutterDemo.html#toc-973 视频地址: https://www.bilibili ...

  5. 20个Flutter实例视频教程-第02节: 底部导航栏制作-2

    视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...

  6. 20个Flutter实例视频教程-第04节: 不规则底部工具栏制作-2

    视频地址: https://www.bilibili.com/video/av39709290/?p=4 博客地址: https://jspang.com/post/flutterDemo.html# ...

  7. 20个Flutter实例视频教程-第07节: 毛玻璃效果制作

    视频地址: https://www.bilibili.com/video/av39709290/?p=7 博客地址: https://jspang.com/post/flutterDemo.html# ...

  8. 20个Flutter实例视频教程-第08节: 保持页面状态

    博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av397092 ...

  9. 20个Flutter实例视频教程-第09节: 保持页面状态-2

    视频地址:https://www.bilibili.com/video/av39709290/?p=9 博客地址:https://jspang.com/post/flutterDemo.html#to ...

随机推荐

  1. 系统安全-Firewall

    Netfilter/iptables是与最新的2.6.x版本Linux内核集成的ip信息包过滤系统.如果Linux系统连接到因特网或LAN.服务器或连接LAN和因特网的代理服务器,则该系统有理由在Li ...

  2. [未完结]数字微分分析法的直线绘制(DDA)

    注意! 本文被第1次更新,可能存在后续更新 直线画法 直线的斜截式方程 在二维空间下,一条直线的方程可以被描述为若干种形式,其中比较常见的一种是斜截式方程: \[y=kx+b\] 其中\(k\)称为直 ...

  3. js thiskeyword

    相信大家都接触过this了,那么 this究竟是什么意思呢?看其字面意思就是个代词.指代其它的一些东西. 那么我们在程序其中,事实上也是一样.this也是个代词. 比方我们在java其中,this的k ...

  4. 搭建React Native开发环境

    搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...

  5. Android Eclipse 导入 AS Gradle AAR 库手冊

    序言 这是一篇半技术类文章.众所周知如今Google主推Android Studio开发工具.而Eclipse已经被闲置一阵子了,可是Eclipse项目却还有非常多没有迁移到AS中.而如今一些新的库都 ...

  6. MVC入门——增

    创建数据库表如下: 生成EF模型 //------------------------------------------------------------------------------ // ...

  7. 辛星浅析html5中的role属性

    我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的h ...

  8. sql server t-sql脚本转成oracle plsql

    将一份SQL SERVER数据库生成的T-SQL脚本,转成ORACLE的PL/SQL,其复杂繁琐程度,远远出乎我的意料. 这份SQL SERVER脚本,里面有表,有视图,还有存储过程,以及一些自定义函 ...

  9. ipa验证错误问题总结

    The following issues were found during validation.这个error的产生原因是因为代码中写的标示符或者方法名,与系统的命名空间冲突. 具体是哪个标示符或 ...

  10. springboot实战--笔记

    由于这本书看过一遍,所以这里是二次复习,记录的东西比较少,就不分章节了. 共12章,524页,预计时间是18h 第一章 spring基础: 第二章 spring常用配置: bean的Scope:sin ...