Flutter 自定义弹窗组件

Posted 2023-03-19

参考技术A 封装的弹窗必须要灵活，满足实际开发中的大部分弹窗，比如有无标题、有无内容、有无关闭按钮、有无操作按钮以及按钮的排列样式等需要满足多元化～
共有四个文件: ww_dialog.dart 、 ww_middle_bottom_dialog_widget.dart 、 ww_top_dialog_widget.dart 、 ww_top_dialog_item_data.dart

弹窗主要调用类，主要包含： WWDialog.showTopDialog 、 WWDialog.showMiddleDialog 、 WWDialog.showBottomDialog

支持自定义配置背景颜色、字体大小、颜色、统一回调、自定义按钮、单独回调、是否带三角标志、任意位置、最大高度、超过可以滑动等～

部分展示效果：

支持配置背景颜色、字体大小、颜色、字重、按钮排列方式、标题、内容、按钮支持完全自定义、点击的回调等～

部分展示效果：

支持配置背景颜色、字体大小、颜色、字重、按钮排列方式、标题、内容、按钮支持完全自定义、点击的回调等～

部分展示效果：

中间、底部弹窗的弹窗widget

顶部弹窗的弹窗widget

顶部弹窗的数据源数据模型item

github传送门： https://github.com/WangWee/ww_flutter_dialog

flutter widget

目录

• Overlay 自定义弹窗 悬浮窗
• Hero 页面过渡动画
• BackdropFilter 高斯模糊

Overlay 自定义弹窗 悬浮窗

意思是Overlay是一个Stack组件，可以将OverlayEntry插入到Overlay中，使其独立的child窗口悬浮于其它组件之上，利用这个特性可以自定义弹窗或者悬浮窗

  OverlayEntry entry = OverlayEntry(builder: (context) {
      return Positioned(
        top: 64,
        left: 0,
          child: Material(
            color: Colors.white,
            child: Container(
              height: 40,
              width: MediaQuery.of(context).size.width,
             color: Colors.orange,
              alignment: Alignment.center,
              child: Text(‘我是弹窗‘),
            ),
          ));
    });
    Overlay.of(context).insert(entry);
    Future.delayed(Duration(seconds: 2)).then((res) {
      entry.remove();
    });

Hero 页面过渡动画

Hero的使用非常的简单，需要关联的两个组件用Hero组件包裹，并指定相同的tag参数,代码如下：

///列表item
InkWell(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Hero(
          tag: widget.data,
          child: LoadImage(
            ‘${widget.data.img}‘,
            width: 81.0,
            height: 81.0,
            fit: BoxFit.fitHeight,
          ),
        ),
      ),
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => GoodsDetailsPage(data: widget.data)));
      },
    );
///详情
 Hero(
    tag: tag,
    child: LoadImage(
        imageUrl,
        width: double.infinity,
        height: 300,
        fit: BoxFit.cover,
        ),
    )

BackdropFilter 高斯模糊

ClipRect(
    BackdropFilter(
        filter: ImageFilter.blur(sigmaX, sigmaY),
        child: ...)
)