flutter_bubble_widget

Description:

flutter bubble widget

作者
john.gu


创建时间
2020-11-19 16:00:00



flutter_bubble_widget #
一个全方位尖角的 flutter 气泡组件
介绍 #
Flutter小部件.
您可以使用此小部件的不同属性创建漂亮的聊天气泡.
也可以用作弹窗dialog背景。
安装 #

Add this to your package's pubspec.yaml file:

dependencies:
flutter_bubble_widget: ^1.0.8
copied to clipboard

You can install packages from the command line:

flutter pub get
copied to clipboard

Now in your Dart code, you can use:

import 'package:flutter_bubble_widget/flutter_bubble_widget.dart';
copied to clipboard
示意图 #

参数说明 #
BubbleWidget 气泡背景组件 #



参数名称
说明
类型
默认值




child
子组件，可以是任何widget
Widget
-


padding
内边距
double
10


width
总宽度，包含尖角部分的
double
100


height
总高度，包含尖角部分的
double
100


color
边框或者填充颜色 与style 对应 填充颜色 默认 PaintingStyle.fill 是填充颜色 PaintingStyle.stroke 是 边框线颜色
Color
Colors.greenAccent


style
填充方式 还是边框线方式
PaintingStyle
PaintingStyle.fill


position
尖角的位置其中 非 上下左右 正中位置的 可以通过设置 arrowMargin 尖角 距离 边框的长度来自定义设置 尖角的位置
BubbleArrowPosition
BubbleArrowPosition.topLeft


stokeWidth
边框宽度 当style == PaintingStyle.stroke 时 有效 ，否则无效
double
1


radius
矩形部分 圆角 大小
double
10


arrowMargin
尖角 距离边框的距离
double
10


arrowHeight
尖角高度
double
10


arrowWidth
尖角 宽度
double
10



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, ),
),
),
)

copied to clipboard