Flutter Animations showModal 模态动画方式打开新的页面

题记

—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力


Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

【x4】五分钟视频快速带你浏览构建

【x5】一目了然的源码


如下图所示,你的APP项目中一定会应用到这样的场景,在实际项目开发中,你可以将下图中的图片配置成你想要的布局效果如 优惠券弹框、消息提示等等。

在这里插入图片描述

以小编的性格,要实现百万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随时复制粘贴肯定是需要源码的

完整源码在这里

当然以小编的性格,肯定是要有视频录制的,点击这里查看 有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
已标记关键词 清除标记
<p> <span style="color:#333333;">Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的用户界面。本课程以理论+实例的方式带领大家学习动画的基础理论及各种动画特效的编写。</span> </p> <p> <span style="color:#333333;"><strong>本次课程包含以下内容:<br /> 动画基本概念</strong><br /> <span style="color:#333333;">动画的本质</span><br /> <span style="color:#333333;">帧与FPS</span><br /> <span style="color:#333333;">插值器/估值器</span><br /> <span style="color:#333333;">动画类型</span><br /> <br /> <strong>动画相关核心类</strong><br /> <span style="color:#333333;">Animation介绍</span><br /> <span style="color:#333333;">AnimationController动画管理类</span><br /> <span style="color:#333333;">CurvedAnimation非线性动画</span><br /> <span style="color:#333333;">Tween补间值生成类</span><br /> <br /> <strong>动画事件监听及控制流程</strong><br /> <span style="color:#333333;">Listeners和StatusListeners动画监听</span><br /> <span style="color:#333333;">动画控制流程</span><br /> <br /> <strong>动画示例</strong><br /> <span style="color:#333333;">字体放大动画</span><br /> <span style="color:#333333;">缓动动画</span><br /> <span style="color:#333333;">遮罩动画</span><br /> <span style="color:#333333;">数字变化动画</span><br /> <span style="color:#333333;">图表动画</span><br /> <span style="color:#333333;">AnimatedOpacity实现渐变效果</span><br /> <span style="color:#333333;">Hero实现页面切换动画</span><br /> </span> </p>
相关推荐
<span> </span> <div> 以通俗简介的方式,从浅入深介绍SVM原理和代码流程 让你从此不再惧怕SVM <br /> </div> <div> <p> <br /> </p> <p> <br /> </p> <p> <strong><span style="color:#E53333;">视频部分:</span></strong> </p> </div> 01_SVM之回顾梯度下降原理<br /> 02_SVM之回顾有约束的最优化问题<br /> 03_SVM之回顾有约束的最优化问题-KKT几何解释<br /> 04_SVM之回顾有约束的最优化问题-KKT数学解释<br /> 05_SVM之回顾距离公式和感知器模型<br /> 06_SVM之感知器到SVM的引入<br /> 07_SVM之线性可分时损失函数的表示<br /> 08_SVM之线性可分时损失函数的求解-对w,b变量求偏导<br /> 09_SVM之线性可分时损失函数的求解-对β变量求解.<br /> 10_SVM之线性可分时算法整体流程<br /> 11_SVM之线性可分时案例<br /> 12_SVM之线性不可分时软间隔介绍<br /> 13_SVM之线性不可分时软间隔优化目标<br /> 14_SVM之线性不可分时软间隔算法整体流程<br /> 15_SVM之线性不可分时数据映射高维解决不可分问题<br /> 16_SVM之线性不可分时核函数引入<br /> 17_SVM之线性不可分时核函数讲解<br /> 18_SVM代码之线性可分时和Logistic回归比较<br /> 19_SVM代码之基于鸢尾花数据多分类参数解释<br /> 20_SVM代码之基于鸢尾花数据网格搜索选择参数<br /> 21_SVM代码之不同分类器,核函数,C值的可视化比较<br /> <p> 22_SVM之回归方式SVR </p> <p> 23_SVM代码之SVR解决回归问题 </p> 24_SVM之SMO思想引入<br /> <p> 25_SVM之SMO案列讲解 </p> <p> <br /> </p> <p> <strong><span style="color:#E53333;">代码部分:</span></strong> </p> <p> <img src="https://img-bss.csdn.net/202005090648425294.png" alt="" /> </p> <p> <br /> </p> <p> <strong><span style="color:#E53333;">资料部分:</span></strong> </p> <p> <img src="https://img-bss.csdn.net/202005090649458459.png" alt="" /> </p>
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页