Pulse · Comment Composer
Pulse · Comment Composer is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-post-comment-compose.
The Pulse Comment Composer is the focused reply-writing state, laid out as a full-height Column inside a SafeArea over the near-black #0B0B0F canvas. At the top sits a 56px _TopBar with a muted Cancel tap target on the left and a rounded indigo #6E56F7 Post FilledButton on the right, divided by a hairline border. Below, a scrolling body opens with a _QuotedParent card on the #15151B surface: a gradient _Monogram avatar, a 'Replying to Maya Chen' label, and the two-line, ellipsis-clamped parent comment. Next comes the author row — an 'AR' gradient _Monogram beside a _DraftText RichText that renders the in-progress draft with a highlighted '@mayabuilds' mention run in accent violet and a painted brand-colored caret bar. Anchored above the keyboard is a _MentionStrip: a height-capped, tappable list of three mention suggestions (Maya Chen, Maya Rao, Mayu Tan), each with its own two-tone monogram, name, and @handle. The pinned 52px _Toolbar holds mention, image, GIF and poll _ToolIcon glyphs plus a _CounterRing — a live count of remaining characters drawn by the _RingPainter CustomPainter as a progress arc (128 of 280 used). Every interaction is surfaced through injected callbacks — onCancel, onPost, onMention(handle) and onAttach(kind) — so it stays backend-agnostic. It is self-contained pure Flutter with the bundled Inter font, its own dark near-mono + indigo theme, SafeArea, no network images, and an overflow-proof layout that stays clean at any size.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓A 56px _TopBar pairing a muted Cancel tap target with a rounded indigo Post FilledButton over a hairline divider
- ✓A _QuotedParent card showing the parent author monogram, 'Replying to' label, and two-line ellipsis-clamped comment
- ✓A _DraftText RichText draft with an accent-violet '@mayabuilds' mention run and a painted brand caret bar
- ✓A height-capped, tappable _MentionStrip of three suggestions, each a gradient _Monogram plus name and @handle
- ✓A pinned 52px _Toolbar of mention/image/GIF/poll _ToolIcon glyphs and a _CounterRing drawn by _RingPainter (128/280)
- ✓Injected onCancel, onPost, onMention and onAttach callbacks plus the bundled Inter font and dark indigo theme
Use cases
- ✓The reply-composition sheet users open when tapping Reply on a comment thread in a social or community app
- ✓An @-mention picker demo showing live suggestion matching as a handle is typed into the draft
- ✓A character-limited post editor where the _RingPainter counter visually enforces a 280-character cap
- ✓A quote-reply surface that pins the parent comment above the draft so context stays visible while writing
