Pulse · Group Call — Social Flutter screen
Social
31 views

Pulse · Group Call

Pulse · Group Call is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-call-group.

Group Call is a fully rendered active group video-call screen for the Pulse social + chat app. It opens with a header carrying a collapse chevron, the group name 'Design Guild', a live subtitle ('4 on call · 08:31'), and a grid-layout toggle icon. Below it, an Expanded GridView.count lays out participant tiles two-per-row at a 0.82 aspect ratio: each tile is a rounded, clipped Container painted by _TileScenePainter (a diagonal gradient derived from that peer's colours plus a soft radial vignette), with a centered _MonogramPainter avatar that draws a gradient disc and the peer's initials in white. A bottom-left Row shows a mic or mic_off icon (danger red #F4476B when muted) beside the shadowed name, and the active speaker's tile gets a 2px brand indigo border and an indigo 'Speaking' pill in the top-right corner. Anchored at the bottom is a floating glass control bar (a rounded #15151B pill with a hairline border) holding add-people, mic, camera, and a highlighted active speaker toggle, ending in a circular red call_end button. Interactions run through injected callbacks — onBack, onEnd, and onAddPeople — so it drops into any backend. The palette is the signature Pulse dark near-mono (#0B0B0F ground, #F4F4F7 / #B5B5C2 text) accented with indigo #6E56F7, typeset in the bundled Inter font. It is self-contained pure Flutter: own dark theme, SafeArea, overflow-proof layout, painter-drawn graphics with no network images.

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

Licensed for unlimited commercial projects · resale prohibited · License

What's included

  • _TileScenePainter: per-peer diagonal gradient tile background with a soft radial vignette
  • _MonogramPainter: gradient disc avatar drawing each participant's white initials
  • Two-column GridView.count of participant tiles at a fixed 0.82 child aspect ratio
  • Active-speaker state: 2px indigo #6E56F7 border plus a 'Speaking' pill in the tile corner
  • Per-tile mic pill toggling mic / mic_off with red #F4476B muted color and name ellipsis
  • Floating glass control bar (add / mic / camera / speaker / end) wired to onBack, onEnd, onAddPeople

Use cases

  • Group video-call room for a team or community chat app's calling flow
  • Multi-participant huddle screen showing live speaker and mute states
  • Reference implementation for painter-based avatar grids without network images
  • In-call UI for a Linear/Superhuman-style social product's group conversations

Related screens