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、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页