Pulse · Chats
Pulse · Chats is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-chat-list.
The Chats screen is the messaging tab of Pulse, a Linear/Superhuman-style social app. It opens with a bold 'Chats' title bar and a circular compose action (edit icon) that fires the onNewMessage callback, followed by a rounded 'Search messages' field wired to onSearch. Below sits a horizontal 'active now' rail: a leading 'Your note' add-tile and a row of 56px avatars, each drawn by the _MonogramPainter (a gradient disc with centered initials) and topped with a green online dot. The scrolling body groups conversations under uppercase 'PINNED' and 'ALL MESSAGES' section headers. Every conversation row renders a painted monogram avatar with an optional online dot, the contact name, a message snippet (with special indigo 'Typing…' state and 'You:' / voice-message / photo snippets), a timestamp that turns indigo when unread, an optional pin icon on pinned rows, and a painted _UnreadBadgePainter pill capping at 99+. Unread rows bump name, snippet, and time to heavier weights. Tapping a row calls onOpen with the contact handle. A 5-icon bottom nav (home, explore, video, chat, profile) sits pinned with Chats active and reports taps through onTab. The palette is a near-mono dark base (#0B0B0F) with indigo #6E56F7 brand accents, emerald online dots, and the bundled Inter font. It is self-contained pure Flutter — own dark Theme, SafeArea, overflow-proof rows, painter-drawn avatars and badges, no network images — and fully backend-agnostic, driven entirely through injected 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 — gradient disc avatar with centered white initials, reused across the active rail and every conversation row
- ✓_UnreadBadgePainter — indigo pill drawing the unread count with a 99+ cap and auto-widening for double digits
- ✓Horizontal active-now rail with a 'Your note' add-tile and online-dot avatars in a scrolling ListView.separated
- ✓PINNED vs ALL MESSAGES sections with pin-icon rows and unread-driven bold weighting on name, snippet, and timestamp
- ✓Snippet state handling: indigo 'Typing…', 'You:' sent lines, voice-message and photo previews, indigo unread timestamps
- ✓Injected callbacks onTab, onOpen(handle), onNewMessage, onSearch plus a bundled Inter font and 5-tab bottom nav
Use cases
- ✓Drop-in inbox tab for a social or community app's direct-messaging feature
- ✓Conversation list front-end for a chat product, wired to Firebase or a REST backend via onOpen
- ✓Starting point for a Superhuman-style dark messaging client with pinned threads and presence dots
- ✓Design reference for painter-drawn monogram avatars and unread badges without network image assets
