作者john.gu
创建时间2020-11-19 16:00:00

flutter_bubble_widget

一个全方位尖角的 flutter 气泡组件

介绍

Flutter小部件.

您可以使用此小部件的不同属性创建漂亮的聊天气泡.

也可以用作弹窗dialog背景。

安装

  1. Add this to your package's pubspec.yaml file:
dependencies:
  flutter_bubble_widget: ^1.0.8
  1. You can install packages from the command line:
flutter pub get
  1. Now in your Dart code, you can use:
import 'package:flutter_bubble_widget/flutter_bubble_widget.dart';

示意图

image

参数说明

BubbleWidget 气泡背景组件

参数名称说明类型默认值
child子组件,可以是任何widgetWidget-
padding内边距double10
width总宽度,包含尖角部分的double100
height总高度,包含尖角部分的double100
color边框或者填充颜色 与style 对应 填充颜色 默认 PaintingStyle.fill 是填充颜色 PaintingStyle.stroke 是 边框线颜色ColorColors.greenAccent
style填充方式 还是边框线方式PaintingStylePaintingStyle.fill
position尖角的位置其中 非 上下左右 正中位置的 可以通过设置 arrowMargin 尖角 距离 边框的长度来自定义设置 尖角的位置BubbleArrowPositionBubbleArrowPosition.topLeft
stokeWidth边框宽度 当style == PaintingStyle.stroke 时 有效 ,否则无效double1
radius矩形部分 圆角 大小double10
arrowMargin尖角 距离边框的距离double10
arrowHeight尖角高度double10
arrowWidth尖角 宽度double10

BubbleArrowPosition 尖角位置

属性名称说明类型
left左侧中心enum
leftTop左侧顶部enum
leftBottom左侧底部enum
right右侧中心enum
rightTop右侧顶部enum
rightBottom右侧底部enum
top顶部中心enum
topRight顶部右侧enum
topLeft顶部左侧enum
bottom底部中心enum
bottomRight底部右侧enum
bottomLeft底部左侧enum

代码演示

              BubbleWidget(
                style: PaintingStyle.stroke,
                position: BubbleArrowPosition.left,
                width: 150,
                height: 100,
                arrowWidth: 20,
                arrowHeight: 20,
                color: Colors.red,
                child: Container(
                  child: Text(
                    "强大的 气泡控件",
                    style: TextStyle(color: Colors.red, ),
                  ),
                ),
              )
              

              BubbleWidget(
                position: BubbleArrowPosition.topLeft,
                width: 150,
                height: 80,
                arrowHeight: 20,
                arrowMargin: 20,
                arrowWidth: 20,
                child: Container(
                  child: Text(
                    "强大的 气泡控件",
                    style: TextStyle(color: Colors.red, ),
                  ),
                ),
              )
              

Libraries

flutter_bubble_widget