Pulse · About You — Social Flutter screen
Social
75 views

Pulse · About You

Pulse · About You is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-setup-bio.

Pulse · About You is the third step of the profile-setup flow, rendered top-to-bottom inside a SafeArea Column on the near-black #0B0B0F canvas. A _SetupHeader pins the back IconButton, an eight-segment step-progress bar (three of eight filled in indigo #6E56F7), and a live 3/8 counter. A scrolling ListView then holds the 'Tell us about you' title in bundled Inter 27px with tight -0.7 letter-spacing, a muted subtitle, and four labeled input groups. Each field sits in a reusable _FieldShell — a rounded #1D1D26 surface with a #26262F hairline border: a Display name TextField, a four-line Bio TextField wired to a live character counter that reads '64/160' and flips to red #F4476B past the 160 cap, a Website field prefixed with a link icon, and a Pronouns Wrap of _PronounChip buttons (she/her, he/him, they/them, Custom) where the selected chip glows with an indigo tint fill, brand border, and #9B8CFF accent text. A pinned _SetupFooter carries a fixed 54px indigo Continue FilledButton over a 'Skip for now' TextButton. Fully self-contained pure Flutter with bundled Inter, its own dark ThemeData, overflow-proof layout, and no network images — backend-agnostic and wired through injected onBack, onContinue, and onSkip callbacks.

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

Licensed for unlimited commercial projects · resale prohibited · License

What's included

  • _SetupHeader with an eight-segment step-progress bar and live 3/8 step counter driven by step/total ints
  • _FieldShell reusable rounded input surface reused across the name, bio, and website TextFields
  • Live bio character counter (64/160) that recolors to red #F4476B once the 160-char cap is exceeded
  • _PronounChip Wrap row (she/her, he/him, they/them, Custom) with indigo-tint selected state and setState toggle
  • _SetupFooter with a fixed-height 54px indigo Continue FilledButton and a 'Skip for now' TextButton
  • Injected onBack, onContinue, onSkip callbacks plus bundled Inter font and self-contained dark theme

Use cases

  • Third step of a multi-step social onboarding wizard collecting a user's name, bio, and pronouns
  • A profile-edit sheet reusing the bio field with its live character-limit counter and validation color
  • Community or creator apps that need identity fields plus inclusive pronoun selection during signup
  • A template for any capped-length text form where the counter must warn users before they overflow

Related screens