# Bubble
Bubbles are often used as chat bubbles or pop-up menus.
# FLBubble
FLBubble can provide a bubble background for sub-widgets.
FLBubble(
from: FLBubbleFrom.left, // can change to top/bottom/right
backgroundColor: Colors.white,
child: Container(
width: tWidth,
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 8),
child: Text('Hi, I\'m Tomas Shelby, from England.', style: TextStyle(fontSize: 15), softWrap: true),
)
)
# FLBubbleMenuWidget
FLBubbleMenuWidget can display bubble menu for sub-widgets, which can be displayed by long pressing or clicking. The options in the menu need to specify text and value, and value is dynamic type.
FLBubbleMenuWidget<String>(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: Color(0xFF0F4C81)
),
width: 240,
height: 40,
child: Center(
child: Text('Long press to show menu', style: TextStyle(fontSize: 17, color: Colors.white)),
),
),
itemBuilder: (BuildContext context) {
return [
FLBubbleMenuItem(
text: 'item 1',
value: 'item 1',
),
FLBubbleMenuItem(
text: 'item 2',
value: 'item 2',
),
];
},
onSelected: (value) => FLToast.showText(text: 'Select - $value', position: FLToastPosition.bottom),
onCanceled: () => FLToast.showText(text: 'Canceled', position: FLToastPosition.bottom),
)
# API
# FLBubble
property | description | type | default value |
---|---|---|---|
backgroundColor | color of background | Color | CupertinoColors.white |
from | arrow direction | FLBubbleFrom | FLBubbleFrom.bottom |
padding | padding | EdgeInsetsGeometry | EdgeInsets.all(8) |
child | child widget | Widget |
# FLBubbleMenuWidget
property | description | type | default value |
---|---|---|---|
interaction | interactive way to trigger bubble menu display | FLBubbleMenuInteraction | FLBubbleMenuInteraction.longPress |
itemBuilder | menu item builder | FLBubbleMenuItemBuilder | |
onSelected | selected callback | FLBubbleMenuItemSelected<T> | |
onCancelled | cancelled callback | FLBubbleMenuCancelled | |
child | child widget | Widget | |
offset | offset between menu and child | Offset | Offset.zero |