Pulse · Add Photo
Pulse · Add Photo is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-setup-avatar.
The Add Photo screen is the second step of Pulse's eight-step profile onboarding, rendered on the app's near-black #0B0B0F canvas in the bundled Inter typeface. A _SetupHeader tops the screen with a back arrow, an eight-segment progress bar whose first two segments fill in indigo #6E56F7, and a 2/8 counter. Below, a bold -0.7 letter-spaced "Add a photo" title and a muted subline ("A real photo helps friends recognise you. Square images look best.") set the intent. The centrepiece is the _AvatarPicker: a 156px stack where a _RingPainter draws a full sweep-gradient story ring (accent #9B8CFF to brand #6E56F7 and back) around a 132px circular avatar. With no photo it shows a gradient fill and the user's initials (derived from the injected name, e.g. "AR"); once a photo is set it flips to a darker gradient with a person icon. A 42px brand badge pinned bottom-right swaps between add-a-photo and edit glyphs. Tapping the avatar, or either _ActionTile (Take photo / Choose, each a 56px surface tile with an accent painted icon), toggles the _hasPhoto state via setState. A crop hint card with a crop_rotate icon reassures the user they can crop and reposition before saving. A pinned _SetupFooter holds a fixed 54px indigo Continue button and a muted "Skip for now" link. Fully self-contained pure Flutter: its own dark ThemeData, SafeArea, a scrolling ListView body that is overflow-proof at any size, and no network images. Backend-agnostic and drop-in, wired through injected onBack, onContinue, onSkip callbacks and a name string.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓_RingPainter: a CustomPainter that strokes a full sweep-gradient story ring in accent-to-brand indigo around the avatar
- ✓_AvatarPicker cluster with initials-from-name fallback, gradient circle, and a pinned brand camera/edit badge that reacts to _hasPhoto
- ✓Two _ActionTile buttons (Take photo, Choose) as 56px hairline-bordered surface tiles with accent painted icons and InkWell ripples
- ✓_SetupHeader with a back IconButton, an eight-segment progress bar (two filled), and a 2/8 step counter
- ✓_SetupFooter pinning a fixed 54px indigo Continue FilledButton above a muted Skip for now TextButton
- ✓Bundled Inter font, own dark ThemeData, SafeArea, crop-hint card, and onBack/onContinue/onSkip callback hooks
Use cases
- ✓The avatar-upload step in a new-user profile onboarding flow for a social or chat app
- ✓A standalone change-profile-photo sheet reused from account settings
- ✓An optional, skippable photo prompt inserted into a multi-step signup wizard
- ✓A community or team app's member-avatar setup screen shown after account creation
