Pulse · Typing
Pulse · Typing is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-chat-typing.
The Typing State screen for Pulse renders a one-to-one chat while your contact is still composing. A surface-toned top bar carries a back arrow, a painted _MonogramPainter gradient avatar (teal-to-green 'LB' disc), a tappable name block where 'Lena Brandt' sits above a live 'typing…' status tinted in the #9B8CFF accent, and outlined call and video-call icons. Below, a scrolling ListView lays out the conversation top-to-bottom: two received bubbles (dark surface, hairline border, asymmetric 18/6px radii) and one sent bubble in the #6E56F7 indigo brand fill, each capped at 260px so long lines wrap cleanly. At the foot sits the signature typing bubble — a small avatar beside a surface bubble holding a _TypingDotsPainter, three dots whose radius and opacity bounce on a staggered triangle wave keyed by a phase value to imply the animation. A pinned composer bar closes the screen: an add-circle glyph, a rounded 'Message' field with a camera icon, and a circular indigo mic send button. It is self-contained pure Flutter — bundled Inter font, its own dark near-mono theme on a #0B0B0F background, SafeArea top and bottom, overflow-proof, no network images. Backend-agnostic and drop-in: onBack, onInfo, and onSend are injected callbacks you wire to your own routing and messaging layer.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓_TypingDotsPainter: three dots whose radius and opacity bounce on a staggered triangle wave keyed by a phase value
- ✓_MonogramPainter: gradient initials avatar disc rendering 'LB' with a centered Inter TextPainter, reused in header and typing bubble
- ✓Presence header with painted avatar, tappable name/status block, and outlined call plus video-call icons
- ✓Received and sent chat bubbles with asymmetric corner radii, 260px max width, and indigo #6E56F7 sent fill
- ✓Pinned composer row: add-circle glyph, rounded Message field with camera icon, and circular mic send button
- ✓onBack, onInfo, and onSend callback hooks plus a bundled Inter font and self-contained dark near-mono theme
Use cases
- ✓Show live typing presence in a one-to-one direct-message thread of a social or chat app
- ✓Demonstrate real-time composing feedback while wiring WebSocket or presence-channel events
- ✓Ship a drop-in conversation view where the typing indicator confirms the other party is active
- ✓Prototype messaging UX and bubble styling before connecting a live backend to the send callback
