自定義PopupRoute實(shí)現(xiàn)一點(diǎn)彈窗效果赋秀，劃劃水我纪，直接上代碼溪窒。

PopupRoute是一個(gè)抽象類夯接，首先來(lái)extends實(shí)現(xiàn)一下

import 'package:flutter/material.dart';

class WDPopupRoute extends PopupRoute{

  // pop動(dòng)畫時(shí)間
  Duration? duration;
  Widget child;
  ///背景蒙層顏色
  Color? bgColor;
  WDPopupRoute({
    required this.child,
    this.duration,
    this.bgColor
  });

  @override
  // TODO: implement barrierColor
  Color? get barrierColor => (bgColor!=null?bgColor:Colors.black.withOpacity(0.35));

  @override
  // TODO: implement barrierDismissible
  bool get barrierDismissible => true;

  @override
  // TODO: implement barrierLabel
  String? get barrierLabel => null;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    // TODO: implement buildPage
    return child;
  }

  @override
  // TODO: implement transitionDuration
  Duration get transitionDuration => (duration!=null?duration!:Duration(milliseconds: 330));

}

然后再使用一下·下面是項(xiàng)目中封裝了一個(gè)插件

import 'package:flutter/material.dart';
import 'wd_popup_route.dart';

enum WDCustomPopTypes{
  //屏幕居中
  screen_center,
  //點(diǎn)擊視圖的左上角
  child_lefttop,
  //點(diǎn)擊視圖的點(diǎn)擊位置
  child_tappositon,
}
///與點(diǎn)擊視圖綁定的pop闲擦，可以點(diǎn)哪就從哪彈出視圖
class WDCustomPop extends StatelessWidget {

  ///點(diǎn)擊視圖
  Widget child;
  ///內(nèi)容視圖
  Widget contentChild;
  /// 彈出類型
  WDCustomPopTypes? popType;
  /// 點(diǎn)擊內(nèi)容部分響應(yīng)事件
  Function? onTapContent;
  /// 除screen_center外慢味，其他彈出類型之后墅冷，允許基于指定type的位置給一些偏移
  Offset? offset;
  /// 不管類型纯路，自定義彈出位置
  Offset? customOffset;
  ///點(diǎn)擊背景是否close
  bool isTapClose;

  WDCustomPop({
    Key? key,
    required this.child,
    required this.contentChild,
    this.popType = WDCustomPopTypes.child_lefttop,
    this.offset = Offset.zero,
    this.customOffset,
    this.onTapContent,
    this.isTapClose = true
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(onTapDown: (details){
      ///獲取點(diǎn)擊widget在屏幕中的位置
      final RenderBox button = context.findRenderObject()! as RenderBox;
      final RenderBox overlay = Overlay.of(context)!.context.findRenderObject()! as RenderBox;
      final RelativeRect position = RelativeRect.fromRect(
        Rect.fromPoints(
          button.localToGlobal(Offset.zero, ancestor: overlay),
          button.localToGlobal(Offset.zero, ancestor: overlay),
        ),
        Offset.zero & overlay.size,
      );

      Offset  os = Offset.zero;
      if (customOffset == null) {
        switch(popType){
          case WDCustomPopTypes.child_lefttop:
            os = Offset(position.left+offset!.dx, position.top+offset!.dy);
            break;
          case WDCustomPopTypes.child_tappositon:
            os = Offset(details.globalPosition.dx+offset!.dx, details.globalPosition.dy+offset!.dy);
            break;
        }
      }
      Navigator.push(
        context,
        WDPopupRoute(child: Material(
          color: Colors.white.withAlpha(0),
          child: GestureDetector(
            child: Stack(
              children: [
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  color: Colors.transparent,
                ),
                buildPopContent(context, os)
              ],
            ),
            onTap: (){
              if (isTapClose) {
                Navigator.of(context).pop();
              }
              FocusManager.instance.primaryFocus?.unfocus();
            },
          ),
        ),)
      );
    },child: child,);
  }
  /// pop顯示的內(nèi)容
  Widget buildPopContent(BuildContext context, Offset os) {
    if (customOffset != null) {
      return Positioned(
        child: GestureDetector(
            child: contentChild,
            onTap: () {
              if (onTapContent != null) {
                Navigator.of(context).pop();
                onTapContent!();
              }
            }),
        left: customOffset!.dx,
        top: customOffset!.dy,
      );
    }else{
      return (popType == WDCustomPopTypes.screen_center
          ? Center(
        child: contentChild,
      )
          : Positioned(
        child: GestureDetector(
            child: contentChild,
            onTap: () {
              if (onTapContent != null) {
                Navigator.of(context).pop();
                onTapContent!();
              }
            }),
        left: os.dx,
        top: os.dy,
      ));
    }
    }

}

看看效果唄

xiaoguo.gif