Pulse · Add Members
Pulse · Add Members is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-group-add-members.
The Add Members screen lets a user pick people to add to an existing Pulse group. Under a SafeArea it stacks top-to-bottom: a back-arrow top bar titled 'Add members'; a rounded 44px 'Search' field on the #1D1D26 surface with a muted magnifier icon; a horizontal 84px strip of just-selected avatars, each a 50px painted monogram disc with a small close badge to deselect; then an Expanded ListView of contacts. Every avatar — in the strip and the rows — is drawn by the _MonogramPainter CustomPainter, which fills a top-left-to-bottom-right gradient disc from the contact's tint and paints centered white initials, so nothing depends on network images. Each row shows name, @handle, and a right-side control: existing members render a greyed non-tappable 'In group' label, while everyone else shows a 24px circular checkbox that fills solid indigo #6E56F7 with a white check when selected. Tapping a row toggles selection via a Set of handles and rebuilds the selected strip; the inGroup guard blocks toggling. A pinned bottom bar sits on the #15151B surface above a hairline: it disables to 'Select people to add' when empty and otherwise reads 'Add N members' on a fixed-height 50px indigo pill. It is self-contained pure Flutter with a bundled Inter font, its own #0B0B0F dark near-mono theme, overflow-proof layout, and is backend-agnostic — wired through injected onBack and onAdd(count) callbacks.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓_MonogramPainter CustomPainter that draws a gradient tint disc plus centered white initials for every avatar, so no network images are needed
- ✓Horizontal selected-avatars strip with per-avatar close badge that deselects and rebuilds live as you toggle
- ✓Checkable contact rows: solid indigo #6E56F7 checkbox when selected, greyed non-tappable 'In group' label for existing members
- ✓Set-based selection state with an inGroup guard that blocks toggling members already in the group
- ✓Pinned bottom bar with a fixed 50px pill that switches between disabled 'Select people to add' and 'Add N members' with correct singular/plural
- ✓onBack and onAdd(int count) callback hooks plus a bundled Inter font and self-contained #0B0B0F dark theme
Use cases
- ✓Inviting teammates or friends into an existing group chat from the group info screen
- ✓Bulk-adding several people to a channel while seeing running picks in the avatar strip
- ✓Growing a community or project space while clearly showing who is already a member
- ✓Building the participant-picker step of a group-creation or broadcast-list flow
