Language: English | 中文简体


A bubble shape widget.

Supports common bubble style parameters: stroke, fill, arrow direction, size and so on.

Getting Started

Add dependency

  bubble_widget: ^0.0.2


class BubbleWidgetExample extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BubbleWidgetExample')),
      body: Center(
        child: BubbleWidget(
          padding: EdgeInsets.all(8),
          color: Theme.of(context).primaryColor,
          child: Text('I\'m a bubble'),

Parameter List

ParameterTypeDefault ValueInfo
paddingEdgeInsetsGeometryNullEmpty space to inscribe inside the bubble content. Thechild if any, is placed inside this padding.
colorColorColors.transparentThe color to paint behind the child
elevationdouble5.0The z-coordinate at which to place this material relative to its parent. Default value is 0, whencolor = Colors.transparent.
styleBubbleStyleBubbleStyle.fillBubble style
strokeColorColorColors.transparentOnly valid on style = BubbleStyle.stroke
strokeWidthdouble0.5Only valid on style = BubbleStyle.stroke
directionArrowDirectionArrowDirection.bottomBubble arrow's direction relative to itself
positionRatiodouble0.5Bubble arrow's position ratio, mast be 0.0~1.0, relative to top-left zero coordinate,0.5 represents the center of the bubble arrow edge
arrowHeightdouble5.0Height of the bubble arrow
arrowWidthdouble8.0Width of the bubble arrow
borderRadiusdouble10.0The corners of the bubble content

Figure legends



  • Parameter Auto-fix. To make it easier to use, the parameters arrowHeight, borderRadius, arrowWidth, and positionRatio are automatically corrected if invalid.
  • child and padding of BubbleWidget only fill the bubble body except for the bubble arrow.
  • When arrowWidth = 0 and style = BubbleStyle.stroke, the arrow of the bubble will be displayed as a lead.