题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力
Flutter是谷歌推出的最新的移动开发框架。
【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注
【x2】各种系列的视频教程 免费开源 关注 你不会迷路
【x3】系列文章 百万 Demo 随时 复制粘贴 使用
【x4】五分钟视频快速带你浏览构建
【x5】一目了然的源码
知乎视频www.zhihu.com如下图所示,你的APP项目中一定会应用到这样的场景,在实际项目开发中,你可以将下图中的图片配置成你想要的布局效果如 优惠券弹框、消息提示等等。
![0acb5ba84914de7790112813e5a01e09.png](https://i-blog.csdnimg.cn/blog_migrate/c622170872dcbb5628b51b83b8264d5b.png)
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的
完整源码在这里
在这里是使用了 animations 这个动画包,
animations: ^1.1.2
2020年2月21日,Flutter 团队发布的这个动画包,作为最新宣布的 Material Desin (材质设计)运动系统的一部分。
Material Design 是一个设计系统,支持 iOS、 Android、 web 和 Flutter 的原生实现。这个动画可以理解为是Material Design 的一个新增功能,它包括四个过渡模式:
- Container transform 容器转换
- Shared Axis 共享轴
- Fade through 淡出
- Fade 渐变
如上图的效果就是一种弹出的效果,在这里使用 animations 中的 showModal () 函数来实现
showModal 方法
showModal () 函数是 animations 引入的一个新的全局函数,可用于在当前导航器中以模态的形式来显示。
于现有的 showGeneralDialog ()函数类似,是 material.dart 的一部分。
通过 ModalConfiguration 来配置模态显示,如进入和退出转换、转换的持续时间和模态障碍属性,FadeScaleTransitionConfiguration 为其子类,是一种新材质设计淡出转换的标准值。
//显示底部弹框的功能
void showBottomSheet() {
showModal(
context: context,
//动画过渡配置
configuration: FadeScaleTransitionConfiguration(
//阴影背景颜色
barrierColor: Colors.black54,
//打开新的Widget 的时间
transitionDuration: Duration(milliseconds: 1000),
//关闭新的Widget 的时间
reverseTransitionDuration: Duration(milliseconds: 1000),
),
builder: (BuildContext context) {
//显示的Widget
return HomePage2();
},
);
}
在这里的 HomePage2 就是小编定义的上图中浏览图片的那个页面
class HomePage2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//背景透明
backgroundColor: Colors.transparent,
body: Theme(
data: ThemeData(
//去除点击事件的水波纹效果
splashColor: Colors.transparent,
//云除点击事件的高亮效果
highlightColor: Colors.transparent,
),
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
child: Center(
child: Image.asset("images/banner3.webp"),
),
),
),
),
);
}
}
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的
完整源码在这里
当然以小编的性格,肯定是要有视频录制的,点击这里查看 有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人
知乎视频www.zhihu.com