flutter 路由动画
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/FirstPage.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green, //定义主题风格 primarySwatch
),
home: FirstPage(),
);
} }
import 'package:flutter/material.dart';
import 'package:flutter_app/CustomRoute.dart';
import 'package:flutter_app/pages/SecondPage.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,
),
body:Center(
child: MaterialButton(
child: Icon(
Icons.navigate_next,
color:Colors.white,
size:64.0,
),
onPressed: (){
Navigator.of(context).push(
CustomRoute(SecondPage())); //使用自定义路由动画 },
),
)
);
}
}
import 'package:flutter/material.dart';
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(),
elevation: 0.0,
),
body:Center(
child: MaterialButton(
child: Icon(
Icons.navigate_before,
color:Colors.white,
size:64.0
),
onPressed: ()=>Navigator.of(context).pop(),
),
)
);
}
}
import 'package:flutter/material.dart'; class CustomRoute extends PageRouteBuilder {
final Widget widget; CustomRoute(this.widget)
: super(
transitionDuration: const 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 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,
// ); return FadeTransition(
opacity: Tween(begin:0.0,end :1.0).animate(CurvedAnimation(
parent:animation1,
curve:Curves.fastOutSlowIn
)),
child: child,
);
});
}
效果:
flutter 路由动画的更多相关文章
- Flutter路由的跳转、动画与传参(最简单)
跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...
- 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1
视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2
博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...
- Flutter酷炫的路由动画效果
现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...
- 【Flutter 实战】动画序列、共享动画、路由动画
老孟导读:此篇文章是 Flutter 动画系列文章第四篇,本文介绍动画序列.共享动画.路由动画. 动画序列 Flutter中组合动画使用Interval,Interval继承自Curve,用法如下: ...
- Flutter路由跳转及参数传递
本文要介绍的知识点 用路由推出一个新页面 打开新页面时,传入参数 参数的回传 路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者 ...
- Angular动画——路由动画及高阶动画函数
一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...
- vue2借助animate.css实现路由动画效果
第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...
- Flutter路由_fluro引入配置和使用
Flutter本身提供了路由机制,作个人的小型项目,完全足够了.但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪.而再Flutter问世之初,就已经了企业级路由方案fluro. flutter ...
随机推荐
- python---Numpy模块中线性代数运算,统计和数学函数
NUMPY告一段落,接下来,进入pandas. import numpy as np # Numpy 线性代数运算 # Numpy 统计和数学函数 print('==========计算矩阵与其转置矩 ...
- vue-(过滤器,钩子函数,路由)
1.局部过滤器 在当前组件内部使用过滤器,修饰一些数据 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } // ...
- c++的标准流入流出和使用例子
参考链接 标准输出流(cout) 预定义的对象 cout 是 iostream 类的一个实例.cout 对象"连接"到标准输出设备,通常是显示屏.cout 是与流插入运算符 < ...
- 三大框架整合模板ssh
1.web.xml配置 <!-- 让spring随web启动而创建的监听器 --> <listener> <listener-class>org.springfra ...
- python open 函数的一些坑
(1)路径问题 open一个同py文件同一个目录的文件的时候,用以下: txt = open('/filtered_words.txt','rb') words = txt.readline() fi ...
- netty: marshalling传递对象,传输附件GzipUtils
netty: marshalling传递对象,传输附件GzipUtils 前端与服务端传输文件时,需要双方需要进行解压缩,也就是Java序列化.可以使用java进行对象序列化,netty去传输,但ja ...
- DVWA命令注入扣动分析
本周学习内容: 1.学习web应用安全权威指南: 2.观看安全学习视频: 实验内容: 进行DVWA命令注入漏洞 实验步骤: Low 1.打开DVWA,进入DVWA Security模块将 Level修 ...
- CF19D Points 平衡树
题意:支持插入/删除点 $(x,y)$,查询一个点右上方横坐标与之最接近的点坐标. 我们可以对于每一个操作过的横坐标都开一个 $set$,然后再开一个平衡树,维护每个横坐标上最大的纵坐标. 然后查询点 ...
- 鼠标经过图片会移动(css3过渡,overflow:hidden)
效果图如下: 代码: <body> <div><img src="jd.jpg"></div> </body> img{ ...
- Codevs 1070 普通递归关系(矩阵乘法)
1070 普通递归关系 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 考虑以下定义在非负整数n上的递归关系 f(n) = f0 ...