Pulse · Search Results — Social Flutter screen
Social
88 views

Pulse · Search Results

Pulse · Search Results is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-search-results.

Search Results is the tabbed discovery screen for the Pulse social app, presented as a self-contained Column under a SafeArea on the near-mono #0B0B0F background. At the top a back IconButton sits beside a filled search field: a rounded #1D1D26 pill with a leading search glyph, the live query text ('design') in Inter medium, and a trailing clear (cancel) icon. Below it a 46px segmented tab bar renders four Expanded tabs — Top, People, Tags, Posts — where the active label turns bold #F4F4F7 and grows a short 28px indigo #6E56F7 underline, the inactive labels staying muted #8A8A99; tapping a tab drives setState(_tab) so the body genuinely swaps. The Top tab stacks PEOPLE, TAGS and POSTS sections behind small letter-spaced _SectionLabel headers: _PersonRow shows a gradient initials avatar (accent #9B8CFF to brand #6E56F7), name with an optional verified badge, and a handle-plus-note line with a chevron; _TagRow shows a bordered '#' avatar, the tag, and its post count. The Posts tab (and the inline Top grid) is a 3-column GridView of tap-able thumbnails, each drawn by the _ThumbPainter CustomPainter as a diagonal two-color gradient with a soft translucent white highlight circle — no network images, every pixel painted. Rows and tiles are backend-agnostic drop-in hooks: onBack fires from the back button, and onResult(String) fires with a person name, tag, or 'post-<i>' id on every tap. It is pure Flutter (Flutter SDK + dart: only) with the bundled Inter font, its own ThemeData.dark theme, and overflow-proof, ellipsis-guarded layout.

Reveal the one-line command to drop this screen into your project.

Licensed for unlimited commercial projects · resale prohibited · License

What's included

  • _ThumbPainter CustomPainter that draws each post tile as a diagonal LinearGradient with a translucent white highlight circle — zero network images
  • Four-tab segmented bar (Top/People/Tags/Posts) driven by setState(_tab) with a bold label + 28px indigo #6E56F7 underline on the active tab
  • _PersonRow widget: gradient initials avatar, verified badge, handle-and-note line, and trailing chevron for follow-style results
  • _TagRow widget with a bordered '#' avatar plus hashtag and post-count for topic results, and _SectionLabel headers for the Top feed
  • Filled search field pill with leading search icon, live query text, and trailing clear icon over a hairline #26262F divider
  • onBack and onResult(String) callback hooks (name, tag, or 'post-<i>') plus bundled Inter font and self-contained ThemeData.dark theme

Use cases

  • Drop-in search results surface for a social or community app that splits matches into people, hashtags, and media
  • Explore/discovery destination where users browse a painted post grid and jump into profiles or tags
  • Reusable tabbed results pattern for any query-driven feature (users, topics, content) needing segmented filtering
  • Design-review or portfolio demo of a dark, Inter-typed search UI wired entirely through injected callbacks

Related screens