v_chat_bubbles 1.2.5
v_chat_bubbles: ^1.2.5 copied to clipboard
A comprehensive Flutter chat bubble library supporting Telegram, WhatsApp, Messenger, and iMessage styles with full theming, callbacks, text formatting, and custom bubble support.
Changelog #
All notable changes to this project will be documented in this file.
1.2.5 #
Config Defaults Updated #
VSpacingConfig Tuning
- bubbleRadius: 10 → 13 (more rounded bubbles matching Telegram iOS)
- sameSenderSpacing: 2 → 4 (slightly more space between same-sender messages)
- differentSenderSpacing: 8 → 1 (tighter grouping when sender changes)
Preset Adjustments
- compact: sameSenderSpacing 1→0, differentSenderSpacing 4→3
- loose: sameSenderSpacing 4→2, differentSenderSpacing 12→8
Example App Updates #
- Updated demo pages with improved message samples
- Enhanced message builder examples
1.2.4 #
Bug Fixes #
Fixed Extra Space Under Single-Line Text Bubbles
- Removed
minHeight: minTapTargetSizeconstraint fromBaseBubblethat was forcing 48px minimum height - Single-line text messages now size naturally without extra padding below
Telegram Bubble Painter Improvements
- Consistent Corner Radius: Updated
VTelegramBubblePainterto use configurableradiusparameter instead of hardcoded18px - Bubbles with tails and without tails now have matching corner radii
- All corners (top-left, top-right, bottom-left, bottom-right) use the same
bubbleRadiusfromVSpacingConfig
Telegram iOS Tail Shape
- Redesigned tail bezier curves to match authentic Telegram iOS style
- The corner before the tail now flows smoothly into the tail (no "cut off" appearance)
- Right edge curves directly into tail as one continuous smooth curve
- Applied to both outgoing (bottom-right tail) and incoming (bottom-left tail) bubbles
Improvements #
Selection Mode Tap Target
- Full-width tap target in selection mode - tap anywhere on the row to select/deselect
- GestureDetector now wraps entire row content instead of just the bubble
1.2.3 #
Improvements #
Telegram iOS Typography
Updated Telegram theme to match authentic iOS Telegram typography:
- messageTextStyle: 17pt, w400, height 1.35, letterSpacing -0.4
- timeTextStyle: 11pt, w400, letterSpacing -0.1
- senderNameStyle: 13pt, w600, letterSpacing -0.1
- replyTextStyle: 14pt, w400, letterSpacing -0.2
- captionTextStyle: 15pt, w400, height 1.3, letterSpacing -0.3
- linkTextStyle: 17pt, w400, letterSpacing -0.4
Inline Meta for All Bubble Types
Consistent inline meta (timestamp + status) rendering across all bubbles:
- VBubbleFooter: Updated indicator order (pinned → starred), cleaner Row structure
- VLocationBubble: Address text + meta now inline with
Flexiblewrapper - VContactBubble: Phone number + meta now inline
- VCallBubble: Added missing meta display with
Expandedwrapper for proper layout - VTextBubble: Block content now wrapped in
Flexible(Column(...))for better overflow handling
New Features #
Text Expansion i18n
- Added
seeMoreandseeLesstranslation fields toVTranslationConfig - "See more" / "See less" buttons now fully translatable
New Translations Added #
All language presets updated with text expansion translations:
- English: See more, See less
- Spanish: Ver más, Ver menos
- French: Voir plus, Voir moins
- German: Mehr sehen, Weniger sehen
- Arabic: عرض المزيد, عرض أقل
1.2.2 #
Improvements #
- Context Menu i18n: Context menu items now use
VTranslationConfigfor localization- All menu item labels (Reply, Forward, Copy, Delete, etc.) are now translatable
- Added new translation fields:
actionUnpin,actionUnstar,actionSelect,actionShare,actionSave,actionInfo,actionTranslate,actionSpeak - Custom menu items fall back to their original
labelproperty - Added
labelForMenuItemId()method toVTranslationConfigfor dynamic label lookup
New Translations Added #
All language presets updated with new context menu translations:
- English: Select, Share, Save, Info, Translate, Speak, Unpin, Unstar
- Spanish: Seleccionar, Compartir, Guardar, Información, Traducir, Hablar, Desfijar, Desmarcar
- French: Sélectionner, Partager, Enregistrer, Infos, Traduire, Lire, Désépingler, Démarquer
- German: Auswählen, Teilen, Speichern, Info, Übersetzen, Vorlesen, Lösen, Markierung aufheben
- Arabic: تحديد, مشاركة, حفظ, معلومات, ترجمة, نطق, إلغاء التثبيت, إلغاء التمييز
1.2.1 #
Bug Fixes #
- Fixed: RenderFlex overflow by 0.124 pixels in
VBubbleFooterrow (meta/timestamp display)- Wrapped footer Row in
FittedBox(fit: BoxFit.scaleDown)to handle floating-point precision issues
- Wrapped footer Row in
- Fixed:
VFileBubblenow filters out "null" and "undefined" file extensions- Prevents displaying literal "NULL" or "UNDEFINED" text from improper serialization
- fix file type name overflow
- set back background color for video not have thumbnails
1.2.0 #
Breaking Changes - Theme System Refactor #
The VBubbleTheme has been refactored from a flat 49-property class into a nested architecture with 12 specialized sub-theme models. This provides better organization and more granular customization.
New Nested Theme Structure
VBubbleTheme (root - 12 nested models)
├── core: VBubbleCoreTheme (bubble colors)
├── text: VBubbleTextTheme (text colors & styles)
├── status: VBubbleStatusTheme (message status icons & colors)
├── reply: VBubbleReplyTheme (reply preview styling)
├── forward: VBubbleForwardTheme (forward header styling)
├── voice: VBubbleVoiceTheme (voice message styling)
├── media: VBubbleMediaTheme (media shimmer & progress)
├── reaction: VBubbleReactionTheme (reaction pills)
├── menu: VBubbleMenuTheme (context menu)
├── selection: VBubbleSelectionTheme (selection mode)
├── systemMessages: VBubbleSystemTheme (system messages)
└── dateChip: VBubbleDateChipTheme (date separators)
Migration Guide
// Before (1.1.0) - flat properties
theme.outgoingBubbleColor
theme.incomingTextColor
// After (1.2.0) - nested access
theme.core.outgoing.bubbleColor
theme.text.incoming.primaryColor
// Or use convenience helpers
theme.bubbleColor(isMeSender)
theme.textColor(isMeSender)
New Features #
Complete Sizing Properties
All theme models now include hardcoded sizing properties for full customization:
- VBubbleMenuTheme:
fontSize,iconSize,itemPadding,borderRadius,elevation - VBubbleReactionTheme:
countFontSize,emojiSize,pillPadding,pillBorderRadius,pillSpacing,rowHeight - VBubbleSelectionTheme:
checkmarkSize,checkmarkBackgroundSize,overlayBorderRadius - VBubbleForwardTheme:
textStyle,iconSize,padding,borderRadius - VBubbleReplyTheme:
barWidth,padding,borderRadius,senderNameStyle,messageStyle,maxLines
Selection Mode Behavior
When isSelectionMode is enabled, all interactive elements inside bubbles are now properly disabled:
- Pattern taps (links, mentions, emails, phones)
- Reaction taps
- Avatar taps
- Reply preview taps
- Media taps
- Gallery image taps
Only the tap to select/unselect the message works in selection mode.
New Pattern Config Option
- Added
enableMentionWithIdtoVPatternConfigfor enabling/disabling mention patterns with embedded user IDs
Other Changes #
- Renamed
systemproperty tosystemMessagesinVBubbleThemefor clarity - All theme presets (Telegram, WhatsApp, Messenger, iMessage - light/dark) updated with nested structure
- Backward compatibility getters maintained for common properties
1.1.0 #
Breaking Changes - Callback Renames #
The following callbacks have been renamed for improved clarity:
| Old Name | New Name | Reason |
|---|---|---|
onSelect |
onSelectionChanged |
Better reflects state change semantics |
onReplyTap |
onReplyPreviewTap |
Clarifies it's for tapping the reply preview widget |
onReactionInfoTap |
onReactionTap |
Simplified, clearer naming |
onMenuItemTap |
onMenuItemSelected |
More semantic - item is "selected" not just "tapped" |
onMediaTransferAction |
onTransferStateChanged |
Reflects state change pattern |
VReplyData now requires originalMessageId field (for navigating to original message when tapping reply preview).
Migration Guide #
Update your VBubbleCallbacks usage:
// Before (1.0.0)
VBubbleCallbacks(
onSelect: (messageId, isSelected) { },
onReplyTap: (originalMessageId) { },
onReactionInfoTap: (messageId, emoji, position) { },
onMenuItemTap: (messageId, item) { },
onMediaTransferAction: (messageId, action) { },
)
// After (1.1.0)
VBubbleCallbacks(
onSelectionChanged: (messageId, isSelected) { },
onReplyPreviewTap: (originalMessageId) { },
onReactionTap: (messageId, emoji, position) { },
onMenuItemSelected: (messageId, item) { },
onTransferStateChanged: (messageId, action) { },
)
// VReplyData now requires originalMessageId
VReplyData(
originalMessageId: 'msg_123', // NEW - required
senderId: 'user_1',
senderName: 'John',
previewText: 'Original message text',
)
Other Changes #
- Fixed: CupertinoContextMenu animation lifecycle error when tapping reactions
- Fixed: RenderFlex overflow issues in file, call, and poll bubbles
- Fixed:
onLongPresscallback now properly replaces built-in context menu when set - Removed:
customBubbleBuildersandmenuItemsparameters fromVBubbleScope(usemenuItemsBuilderinstead)
1.0.0 #
Initial stable release of v_chat_bubbles.
Features #
Bubble Styles
- Telegram - Gradient bubbles with distinctive curved tails
- WhatsApp - Classic green/white bubbles with triangular tails
- Messenger - Blue gradient outgoing, gray incoming bubbles
- iMessage - Minimal design with subtle tails
- Custom - Fully customizable styling
Bubble Widgets
VTextBubble- Text messages with link preview supportVImageBubble- Single image messagesVVideoBubble- Video messages with thumbnail and durationVVoiceBubble- Voice messages with waveform visualizationVFileBubble- File attachments with type iconsVLocationBubble- Location sharing with map previewVContactBubble- Contact card sharingVPollBubble- Interactive polls (single/multiple choice)VCallBubble- Voice/video call historyVGalleryBubble- Multi-image gallery gridVStickerBubble- Sticker messagesVQuotedContentBubble- Quoted/shared contentVSystemBubble- System messagesVDateChip- Date separator chipsVDeletedBubble- Deleted message placeholderVCustomBubble<T>- Extensible custom bubble types
Text Formatting
- Inline formatting:
*bold*,_italic_,~strikethrough~,`code` - Block formatting: code blocks, blockquotes, bullet lists, numbered lists
- Pattern detection: URLs, emails, phone numbers, mentions, hashtags
- Custom patterns with regex support
Configuration System
VBubbleConfig- Master configuration objectVPatternConfig- Text pattern settingsVGestureConfig- Touch gesture settingsVAvatarConfig- Avatar display settingsVSizingConfig- Bubble dimension settingsVSpacingConfig- Spacing and padding settingsVMediaConfig- Media display settingsVTextExpansionConfig- Expandable text settingsVAnimationConfig- Animation timing settingsVAccessibilityConfig- Accessibility settingsVTranslationConfig- Localization strings
Theming
- Pre-built themes for all styles (light/dark variants)
VBubbleTheme.custom()for easy custom theming- Full color, typography, and gradient customization
- Style-specific reaction emoji sets
Callbacks
- Core: tap, long press, swipe reply, select, avatar tap, reply tap
- Grouped: reactions, pattern tap, media tap, menu item tap
- Type-specific: poll vote, location tap, contact tap, call tap, expand toggle, download
Custom Bubbles
VCustomBubbleDatabase class for custom data modelsCustomBubbleBuildertypedef for builder functionscustomBubbleBuildersmap for registering builders- Built-in examples:
VProductBubble,VReceiptBubble
Selection Mode
- Multi-select support with
isSelectionModeandselectedIds VDefaultMenuItems.selectfor triggering selection from context menu- Visual selection indicators on bubbles
Performance
- Span caching for parsed text
- Pattern list caching
- Block widget caching
- Text direction caching
- Optimized
shouldRepaintin all painters IntrinsicWidthfor proper bubble sizing
Accessibility
- Semantic labels for screen readers
- Configurable minimum tap target sizes
- High contrast mode support
- RTL text direction detection
Localization
- Built-in English and Arabic translations
VTranslationConfig.forLocale()factory- All user-facing strings configurable
Dependencies #
v_platform- Cross-platform file handlingv_chat_voice_player- Voice message playbackvideo_player- Video playback supportintl- Date/time formatting
