flutter_bubble_widget 1.0.8 copy "flutter_bubble_widget: ^1.0.8" to clipboard
flutter_bubble_widget: ^1.0.8 copied to clipboard

Flutter widget for creating different types of chat bubble. You can use different properties of this Widget and create beautiful Chat Bubbles.It can also be used as a dialog background

作者 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 子组件,可以是任何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, ),
                  ),
                ),
              )
              
4
likes
25
pub points
47%
popularity

Publisher

unverified uploader

Flutter widget for creating different types of chat bubble. You can use different properties of this Widget and create beautiful Chat Bubbles.It can also be used as a dialog background

Repository (GitHub)
View/report issues

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_bubble_widget