Pulse · Pick Username
Pulse · Pick Username is a production-ready Social Flutter screen from FlutterKit Pro, installable with flutterkit add social-setup-username.
Pick a username is the first of eight onboarding steps in Pulse's profile-setup flow, presented on the app's near-mono #0B0B0F dark canvas with the indigo #6E56F7 brand accent and bundled Inter typography. A _SetupHeader tops the screen with a back IconButton and an eight-segment progress bar that fills the first segment in indigo, paired with a 1/8 counter. Below sits a bold 27px 'Pick a username' title and a muted subtitle. The core is a rounded @-prefixed TextField whose surface border turns green the moment the handle is valid, with a trailing _AvailabilityChip that shows a green check + 'Available' or a red cancel + 'Taken', driven by live logic (under 3 chars is too short and hides the chip, a small taken-set marks handles unavailable). A helper line reads 'At least 3 characters', 'That username is taken' or 'Nice — that one's free' beside a live 10/20 character counter capped at maxLength 20. A SUGGESTIONS label sits above a Wrap of tappable _SuggestionChip pills (@alex.rivera, @alexr_, @realalexrivera) that populate the field on tap. A pinned _SetupFooter holds a fixed-height 54px Continue FilledButton that stays disabled until the handle is available. Fully self-contained pure Flutter — bundled Inter font, own dark ThemeData, SafeArea, overflow-proof, no network images — and backend-agnostic via injected onBack and onContinue callbacks so real availability checks drop straight in.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓_AvailabilityChip that flips between a green check 'Available' and red cancel 'Taken' pill and hides itself when the handle is too short
- ✓@-prefixed TextField with maxLength 20, live character counter and a surface border that turns success-green when the handle validates
- ✓_SetupHeader with a back IconButton plus an eight-segment step-progress bar and 1/8 step counter
- ✓_SuggestionChip Wrap of tappable @handle pills that populate the field on tap via onTap callbacks
- ✓_SetupFooter with a fixed 54px Continue FilledButton that enables only when the username is available
- ✓Bundled Inter font, self-contained dark theme, and injected onBack / onContinue callbacks for drop-in wiring
Use cases
- ✓First step of a social or chat app's account-creation and profile-setup onboarding flow
- ✓Reserving a public @handle with real-time availability checks against your users API
- ✓Reclaiming or changing an existing username in account settings with the same validation UI
- ✓Prompting suggested alternatives when a preferred handle is already taken during signup
