Pulse · Story Viewer
Pulse · Story Viewer is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-story-viewer.
A production-ready full-screen Story Viewer for the Pulse social app, built as a Stack that fills the screen with painted story media and layers UI over it. The background is drawn by the _StoryMediaPainter — a warm dusk gradient (deep violet to peach), a radial sun glow with a solid low sun disc, twelve soft light rays and a silhouetted city skyline path along the bottom — so there is zero network-image dependency. Twin top and bottom black scrim gradients keep the overlaid text legible. Along the top, inside SafeArea, the _StoryProgressPainter renders one rounded track per story: segments before the active index are fully filled, the active one is filled to a progress fraction, later ones stay dim. Below it sits the _Header: a gradient ML avatar (indigo #6E56F7 to #9B8CFF), the author name 'Maya Lin', a '2h' timestamp, plus more-horiz and close IconButtons. A translucent bordered caption bubble ('Golden hour on the roof') floats above a tappable _ViewersPill showing '248 viewers' with a chevron, and a pinned _ReplyBar carries a rounded 'Send a message' field alongside heart-like and send IconButtons. An invisible Row of translucent GestureDetectors splits the screen one-third / two-thirds for prev / next tap navigation. Every action is wired through injected callbacks — onClose, onPrev, onNext, onReply, onLike, onShare, onViewers, onMore — with storyIndex and storyCount as inputs, making it backend-agnostic. It is self-contained pure Flutter: bundled Inter font, its own dark ThemeData, SafeArea, and an overflow-proof layout with no external assets.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓_StoryMediaPainter — painted dusk gradient, radial sun glow with solid sun disc, twelve light rays and a silhouetted skyline path, so no network media is needed
- ✓_StoryProgressPainter — segmented rounded progress bars driven by storyCount, active storyIndex and a progress fraction, filling past/active/future segments distinctly
- ✓_Header with a gradient ML avatar (#6E56F7 to #9B8CFF), author name, timestamp and more-horiz plus close IconButtons wired to onMore and onClose
- ✓Invisible one-third / two-thirds Row of translucent GestureDetectors giving tap-left-to-go-back and tap-right-to-advance via onPrev and onNext
- ✓_ViewersPill (chevron + '248 viewers') and pinned _ReplyBar with a 'Send a message' field, favorite-border and send IconButtons on onViewers, onReply, onLike, onShare
- ✓Self-contained theming: bundled Inter font, dark ThemeData, SafeArea, top/bottom scrim gradients and a translucent caption bubble, all overflow-proof
Use cases
- ✓Drop-in full-screen story playback for a social feed, wiring onPrev/onNext to your own story queue and media loader
- ✓Ephemeral 24-hour status viewer where onViewers opens the audience list and storyIndex/storyCount reflect real segments
- ✓Creator moment or highlight reel screen where onReply and onLike route into your DM and reactions backend
- ✓Onboarding or announcement stories inside an app, using the caption bubble and progress bars to pace multi-slide messages
