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 路由动画的更多相关文章

  1. Flutter路由的跳转、动画与传参(最简单)

    跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...

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

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

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

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

  4. Flutter酷炫的路由动画效果

    现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...

  5. 【Flutter 实战】动画序列、共享动画、路由动画

    老孟导读:此篇文章是 Flutter 动画系列文章第四篇,本文介绍动画序列.共享动画.路由动画. 动画序列 Flutter中组合动画使用Interval,Interval继承自Curve,用法如下: ...

  6. Flutter路由跳转及参数传递

    本文要介绍的知识点 用路由推出一个新页面 打开新页面时,传入参数 参数的回传 路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者 ...

  7. Angular动画——路由动画及高阶动画函数

    一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...

  8. vue2借助animate.css实现路由动画效果

    第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...

  9. Flutter路由_fluro引入配置和使用

    Flutter本身提供了路由机制,作个人的小型项目,完全足够了.但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪.而再Flutter问世之初,就已经了企业级路由方案fluro. flutter ...

随机推荐

  1. python---Numpy模块中线性代数运算,统计和数学函数

    NUMPY告一段落,接下来,进入pandas. import numpy as np # Numpy 线性代数运算 # Numpy 统计和数学函数 print('==========计算矩阵与其转置矩 ...

  2. vue-(过滤器,钩子函数,路由)

    1.局部过滤器 在当前组件内部使用过滤器,修饰一些数据 //声明 filters:{ '过滤器的名字':function(val,a,b){ //a 就是alax ,val就是当前的数据 } } // ...

  3. c++的标准流入流出和使用例子

    参考链接 标准输出流(cout) 预定义的对象 cout 是 iostream 类的一个实例.cout 对象"连接"到标准输出设备,通常是显示屏.cout 是与流插入运算符 < ...

  4. 三大框架整合模板ssh

    1.web.xml配置 <!-- 让spring随web启动而创建的监听器 --> <listener> <listener-class>org.springfra ...

  5. python open 函数的一些坑

    (1)路径问题 open一个同py文件同一个目录的文件的时候,用以下: txt = open('/filtered_words.txt','rb') words = txt.readline() fi ...

  6. netty: marshalling传递对象,传输附件GzipUtils

    netty: marshalling传递对象,传输附件GzipUtils 前端与服务端传输文件时,需要双方需要进行解压缩,也就是Java序列化.可以使用java进行对象序列化,netty去传输,但ja ...

  7. DVWA命令注入扣动分析

    本周学习内容: 1.学习web应用安全权威指南: 2.观看安全学习视频: 实验内容: 进行DVWA命令注入漏洞 实验步骤: Low 1.打开DVWA,进入DVWA Security模块将 Level修 ...

  8. CF19D Points 平衡树

    题意:支持插入/删除点 $(x,y)$,查询一个点右上方横坐标与之最接近的点坐标. 我们可以对于每一个操作过的横坐标都开一个 $set$,然后再开一个平衡树,维护每个横坐标上最大的纵坐标. 然后查询点 ...

  9. 鼠标经过图片会移动(css3过渡,overflow:hidden)

    效果图如下: 代码: <body> <div><img src="jd.jpg"></div> </body> img{ ...

  10. Codevs 1070 普通递归关系(矩阵乘法)

    1070 普通递归关系 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 考虑以下定义在非负整数n上的递归关系 f(n) = f0 ...