Pulse · Group Chat
Pulse · Group Chat is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-group-chat.
Group Chat renders a full multi-person conversation thread for the Pulse social app. The top bar carries a back arrow, a 40x40 stacked cluster of two overlapping _MonogramPainter avatars (KO and AP, each a tinted gradient disc with painted initials), a tappable title block reading 'Launch Team' over the member summary 'Aria, Kojo, Noah +2', and trailing video-call and overflow icons. Below, an Expanded ListView.builder walks a list of _GMsg records: centered pill-shaped system lines announce joins and renames ('Aria added Noah to the group'), received bubbles are surface-dark with a hairline border and a coloured sender name (Kojo green, Noah blue, Aria amber) plus a 28px monogram avatar shown only when the sender run changes, and own messages are brand-indigo (#6E56F7) bubbles pinned right with a white timestamp and a single/double-check read receipt. A pinned composer at fixed height holds an add-attachment icon, a rounded 'Message Launch Team' input pill with an inline camera icon, and a circular indigo send button. Built on a dark near-mono palette (#0B0B0F background, #15151B surface, #6E56F7 accent) with the bundled Inter font. Self-contained pure Flutter per CONVENTIONS.md: own dark theme, SafeArea top and bottom, overflow-proof with maxWidth-constrained bubbles, no network images. Backend-agnostic drop-in wired through injected onBack, onInfo, onAttach and onSend callbacks.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓_MonogramPainter CustomPainter: gradient-disc avatars with centered painted initials, used for the stacked top-bar cluster and per-sender bubble avatars
- ✓Run-grouping logic that shows the coloured sender name + avatar only when the sender changes, collapsing consecutive messages from one person
- ✓Received vs sent bubble styling: bordered dark surface bubbles for others, brand-indigo bubbles pinned right for own messages
- ✓Centered pill system lines for join/rename events plus per-message timestamps and single/double-check read receipts
- ✓Fixed-height pinned composer with add-attachment icon, rounded input pill with inline camera, and circular indigo send button
- ✓Four injected callbacks (onBack, onInfo, onAttach, onSend) and the bundled Inter font on a #0B0B0F dark near-mono theme
Use cases
- ✓Team or project group thread inside a social or productivity app where several members coordinate a launch
- ✓Community or club group chat with distinct colour-coded member identities and join/leave announcements
- ✓Family or friends group conversation showing overlapping avatars and per-sender grouping
- ✓Onboarding or template screen demonstrating multi-participant messaging with read receipts and system events
