Pulse · In-Chat Search
Pulse · In-Chat Search is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-chat-search.
In-Chat Search turns a Pulse conversation into a find-in-thread experience. At the top, a search bar built from a back IconButton and a rounded _surfaceAlt input pill holds a magnifier icon, the active query ('launch') in bundled Inter, and a tappable close icon wired to onClear. Directly beneath sits a results ribbon showing '3 of 4 matches' in muted w600 text alongside up/down chevrons that fire onPrev and onNext to walk the match list, the down arrow tinted the #9B8CFF accent to signal direction. The thread renders as a ListView of chat bubbles: received bubbles use the dark _surface fill with a hairline border, sent bubbles use the #6E56F7 indigo brand fill, and asymmetric corner radii give each side its tail. Every occurrence of the query term is highlighted inline via a RichText span builder that lowercases and scans the text, painting each match with a translucent accent backgroundColor and heavy w800 weight; the single active match is drawn brighter with a solid accent background and dark ink, and its whole bubble gets a 1.5px accent outline so the current hit stands out at a glance. Colors follow Pulse's dark near-mono palette (#0B0B0F background, layered #15151B / #1D1D26 surfaces, #F4F4F7 high-contrast text, #8A8A99 muted). It is self-contained pure Flutter: bundled Inter font, its own ThemeData.dark theme, SafeArea, overflow-proof maxWidth-constrained bubbles, and no network images. Fully backend-agnostic and drop-in, wired through injected onBack, onClear, onPrev, and onNext callbacks so you supply the real query state and match navigation.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓_searchBar() header combining a back IconButton, a rounded _surfaceAlt input pill with magnifier icon, live query text and an onClear close button
- ✓_resultsRibbon() match counter ('3 of 4 matches') with up/down chevrons wired to onPrev and onNext, the down arrow tinted the #9B8CFF accent
- ✓_highlighted() RichText span builder that scans each message and wraps every query occurrence in a bold, accent-backed TextSpan
- ✓Active-match emphasis: brighter solid-accent highlight with dark ink plus a 1.5px accent outline around the current bubble via the _SMsg.active flag
- ✓_bubble() sent/received chat rows with indigo #6E56F7 brand vs dark _surface fills, asymmetric tail radii and maxWidth 268 overflow-proof constraints
- ✓Four injected callbacks (onBack, onClear, onPrev, onNext), the bundled Inter font, and a self-contained ThemeData.dark palette
Use cases
- ✓Add find-in-conversation search to a chat or DM feature so users can locate an old message by keyword
- ✓Ship match-stepping navigation (prev/next through hits with a live counter) in a messaging or support inbox
- ✓Demonstrate inline keyword highlighting inside chat bubbles for a customer-support or team-collaboration product
- ✓Provide a jump-to-message search layer over a long thread in a community, group-chat, or social app
