Flutter Animations showModal 模态动画方式打开新的页面-CFANZ编程社区

题记

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

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"),
            ),
          ),
        ),
      ),
    );
  }
}