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: ),
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的更多相关文章
- 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2
博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...
- 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1
20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...
- 20个Flutter实例视频教程-第13节: 展开闭合案例
20个Flutter实例视频教程-第13节: 展开闭合案例 视频地址: https://www.bilibili.com/video/av39709290/?p=13 博客地址: https://js ...
- 20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1
第03节: 不规则底部工具栏制作-1 博客地址: https://jspang.com/post/flutterDemo.html#toc-973 视频地址: https://www.bilibili ...
- 20个Flutter实例视频教程-第02节: 底部导航栏制作-2
视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...
- 20个Flutter实例视频教程-第04节: 不规则底部工具栏制作-2
视频地址: https://www.bilibili.com/video/av39709290/?p=4 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第07节: 毛玻璃效果制作
视频地址: https://www.bilibili.com/video/av39709290/?p=7 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第08节: 保持页面状态
博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av397092 ...
- 20个Flutter实例视频教程-第09节: 保持页面状态-2
视频地址:https://www.bilibili.com/video/av39709290/?p=9 博客地址:https://jspang.com/post/flutterDemo.html#to ...
随机推荐
- 系统安全-Firewall
Netfilter/iptables是与最新的2.6.x版本Linux内核集成的ip信息包过滤系统.如果Linux系统连接到因特网或LAN.服务器或连接LAN和因特网的代理服务器,则该系统有理由在Li ...
- [未完结]数字微分分析法的直线绘制(DDA)
注意! 本文被第1次更新,可能存在后续更新 直线画法 直线的斜截式方程 在二维空间下,一条直线的方程可以被描述为若干种形式,其中比较常见的一种是斜截式方程: \[y=kx+b\] 其中\(k\)称为直 ...
- js thiskeyword
相信大家都接触过this了,那么 this究竟是什么意思呢?看其字面意思就是个代词.指代其它的一些东西. 那么我们在程序其中,事实上也是一样.this也是个代词. 比方我们在java其中,this的k ...
- 搭建React Native开发环境
搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...
- Android Eclipse 导入 AS Gradle AAR 库手冊
序言 这是一篇半技术类文章.众所周知如今Google主推Android Studio开发工具.而Eclipse已经被闲置一阵子了,可是Eclipse项目却还有非常多没有迁移到AS中.而如今一些新的库都 ...
- MVC入门——增
创建数据库表如下: 生成EF模型 //------------------------------------------------------------------------------ // ...
- 辛星浅析html5中的role属性
我们使用role属性告诉辅助设备.这个元素所扮演的角色.比方点击的按钮,我们通常就使用role="button",会让这个元素可点击. 可是它很多其它的是用来增强语义性,当现有的h ...
- sql server t-sql脚本转成oracle plsql
将一份SQL SERVER数据库生成的T-SQL脚本,转成ORACLE的PL/SQL,其复杂繁琐程度,远远出乎我的意料. 这份SQL SERVER脚本,里面有表,有视图,还有存储过程,以及一些自定义函 ...
- ipa验证错误问题总结
The following issues were found during validation.这个error的产生原因是因为代码中写的标示符或者方法名,与系统的命名空间冲突. 具体是哪个标示符或 ...
- springboot实战--笔记
由于这本书看过一遍,所以这里是二次复习,记录的东西比较少,就不分章节了. 共12章,524页,预计时间是18h 第一章 spring基础: 第二章 spring常用配置: bean的Scope:sin ...