flutter_bubble_widget 1.0.8
flutter_bubble_widget: ^1.0.8

Flutter Android iOS web

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子组件,可以是任何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, ),
                  ),
                ),
              )
              
2
likes
75
pub points
17%
popularity

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

Documentation

API reference

Uploader

johngusir@gmail.com

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_bubble_widget