Bubble Popup Window #

Flutter气泡弹窗库，提供带箭头指示器的浮动弹窗组件。

功能特性 #

• 🎯 12种定位选项：支持上下左右各个方向及对齐方式的弹窗定位
• 🔄 智能位置调整：自动检测边界并调整弹窗位置确保完全可见
• 🎨 高度可定制：支持自定义间距、边距、箭头大小和颜色等样式
• 🎭 交互控制：支持点击外部关闭、遮罩层颜色设置等功能

安装 #

在pubspec.yaml文件中添加依赖：

dependencies:
  bubble_popup_window: ^0.0.2

使用 #

import 'package:bubble_popup_window/bubble_popup_window.dart';

GlobalKey key = GlobalKey();

ElevatedButton(
  key: key,
  onPressed: () {
    _showToolTip(key.currentContext!);
  },
  child: const Text("Tooltip"),
)

void _showToolTip(BuildContext anchorContext) {
  BubblePopupWindow.show(
    //锚点上下文
    anchorContext: anchorContext,
    //弹窗布局，用户自定义
    child: const Text(
      '这是一个气泡弹窗',
      style: TextStyle(
        color: Colors.white,
        fontSize: 14,
        fontWeight: FontWeight.normal,
      ),
    ),
    //弹窗方向
    direction: BubbleDirection.bottomCenter,
    //弹窗颜色
    color: Colors.red,
    //弹窗圆角半径
    radius: BorderRadius.circular(8),
    //弹窗内边距
    padding: const EdgeInsets.all(16),
    //弹窗距离锚点间距
    gap: 4.0,
    //弹窗距离屏幕边缘最小间距
    miniEdgeMargin: const EdgeInsets.only(left: 10, right: 10),
    //遮罩层颜色
    maskColor: null,
    //点击弹窗外部时是否自动关闭弹窗
    dismissOnTouchOutside: true,
    //是否显示箭头
    showArrow: true,
    //箭头宽度
    arrowWidth: 12.0,
    //箭头高度
    arrowHeight: 6.0,
  );
}

参数说明 #

弹窗方向选项 #

BubbleDirection 枚举提供了以下12种位置选项：

• 上方: topStart, topCenter, topEnd
• 下方: bottomStart, bottomCenter, bottomEnd
• 左侧: leftStart, leftCenter, leftEnd
• 右侧: rightStart, rightCenter, rightEnd

enum BubbleDirection {
  //弹窗在锚点上方，和锚点左边对齐
  topStart,
  //弹窗在锚点上方，和锚点居中对齐
  topCenter,
  //弹窗在锚点上方，和锚点右边对齐
  topEnd,

  //弹窗在锚点下方，和锚点左边对齐
  bottomStart,
  //弹窗在锚点下方，和锚点居中对齐
  bottomCenter,
  //弹窗在锚点下方，和锚点右边对齐
  bottomEnd,

  //弹窗在锚点左侧，和锚点顶部对齐
  leftStart,
  //弹窗在锚点左侧，和锚点居中对齐
  leftCenter,
  //弹窗在锚点左侧，和锚点底部对齐
  leftEnd,

  //弹窗在锚点右侧，和锚点顶部对齐
  rightStart,
  //弹窗在锚点右侧，和锚点居中对齐
  rightCenter,
  //弹窗在锚点右侧，和锚点底部对齐
  rightEnd;
}

许可证 #

MIT License