Pulse · Chat — Social Flutter screen
Social
28 views

Pulse · Chat

Pulse · Chat is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-chat-conversation.

SocialChatConversationScreen is a complete 1:1 direct-message thread for Pulse, laid out top-to-bottom as a Column inside a SafeArea. It opens with a frosted top bar on the #15151B surface: a back IconButton, a 38x38 painted avatar (the _MonogramPainter draws a top-left-to-bottom-right gradient disc with centered 'AP' initials) overlaid with an emerald online dot, a tappable name-plus-presence stack showing 'Aria Petrova' over a green 'Active now' label, and trailing audio-call and video-call IconButtons. The body is a reverse ListView.builder of message bubbles: received messages sit left in bordered #15151B surface bubbles, sent messages sit right in solid indigo #6E56F7 bubbles, each with an asymmetric tail radius, a timestamp, and — on sent bubbles — a done / done_all read-receipt tick that brightens once read. A centered 'TODAY' date divider with hairline rules breaks up the timeline. A composer is pinned at a fixed height along the bottom: an add/attach button, a rounded #1D1D26 'Message' input field with an inline camera icon, and a circular indigo send button. It is self-contained pure Flutter with a bundled Inter font, its own dark near-mono theme, SafeArea, and overflow-proof constrained bubbles (maxWidth 280, no network images). Every action — onBack, onInfo, onCall, onVideo, onAttach, onSend — is exposed as an injected VoidCallback, so it is a backend-agnostic drop-in you wire to any messaging stack.

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 that renders a gradient avatar disc with centered white initials, no image asset needed
  • Frosted top bar cluster: back, painted avatar with emerald online dot, tappable name + 'Active now' presence, call and video IconButtons
  • reverse ListView.builder message timeline with a _Msg model driving sent vs. received bubble styling and a 'TODAY' date divider
  • Read-receipt state: sent indigo bubbles show a done or done_all tick that brightens when the message is marked read
  • Fixed-height pinned composer with attach, rounded 'Message' field, inline camera icon, and a circular indigo send button
  • Six injected VoidCallback hooks (onBack, onInfo, onCall, onVideo, onAttach, onSend) plus the bundled Inter font and dark #0B0B0F theme

Use cases

  • Drop-in 1:1 direct-message thread screen for a social, community, or dating app's chat flow
  • Reference conversation UI for wiring read receipts and sent/received bubble states to a real messaging backend
  • Customer-support or creator-DM inbox detail view where users chat one-to-one with presence and call actions
  • Design-team or collaboration app private thread with attach, camera, and quick audio/video call entry points

Related screens