打开弹框_Flutter Animations showModal 模态动画方式打开新的页面

本文介绍了如何使用Flutter的animations库中的showModal方法创建模态动画弹框,展示了Material Design的过渡模式,如Container transform、Shared Axis、Fade through和Fade,并提供了完整源码和相关视频教程链接。
摘要由CSDN通过智能技术生成

题记

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


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

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

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

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

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

【x5】一目了然的源码

知乎视频​www.zhihu.com

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

0acb5ba84914de7790112813e5a01e09.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
知乎视频​www.zhihu.com
知乎视频​www.zhihu.com
知乎视频​www.zhihu.com
知乎视频​www.zhihu.com
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值