Cineo · Choose Avatar
Cineo · Choose Avatar is a production-ready Streaming Flutter screen from FlutterKit Pro, installable with flutterkit add stream-profile-avatar-pick.
Choose Avatar is the profile-image picker for Cineo, a Netflix-style movies and TV app. Top-to-bottom it opens with a centered _TopBar carrying a back arrow (wired to onBack) and the 'Choose Avatar' title, then a horizontally scrolling row of pill collection chips — Smileys, Characters and Kids — where the active chip fills with Cineo's brand red (#E50914) and the rest sit muted on the #16161D surface. Below runs an Expanded 3-column GridView of six avatars; tapping a chip rotates the character set (base = collection index times two) so each collection feels distinct, and tapping a tile updates the selection via setState. Every avatar is 100 percent painted: _ProfileAvatar draws a vivid gradient rounded-square from a six-way palette and _AvatarFacePainter renders a friendly geometric face — plain smile, round glasses, cat ears, a visor bar, star eyes or raised brows — so there are zero raster or network images. The chosen tile animates a 3px gold (#F5C518) ring via AnimatedContainer, and a pinned bottom bar with a hairline top border holds the red-gradient _PrimaryButton 'Apply' (wired to onApply). It is self-contained pure Flutter: bundled Inter font, its own cinematic dark theme (#0B0B0F background), SafeArea, and an overflow-proof Column/Expanded layout. Backend-agnostic — you drop it in and wire the injected onBack and onApply callbacks to your own profile store.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓_AvatarFacePainter — CustomPainter drawing six geometric expressions (glasses, cat ears, visor, star eyes, raised brows, smile) in translucent white ink
- ✓_ProfileAvatar tile with a six-way gradient palette rounded-square, fully painted so there are no raster or network images
- ✓Collection chip row (Smileys / Characters / Kids) that rotates the grid's character set and fills the active pill in brand red
- ✓Selection state with a 3px gold ring animated via AnimatedContainer on the tapped grid tile
- ✓Pinned bottom bar with hairline top border and a red-gradient _PrimaryButton wired to the onApply callback
- ✓Bundled Inter font, cinematic dark theme, SafeArea and injected onBack/onApply hooks for a backend-agnostic drop-in
Use cases
- ✓Let a viewer pick a fun painted avatar when creating or editing a streaming profile
- ✓Personalize kids and adult profiles with distinct Smileys, Characters and Kids collections
- ✓Onboarding step where a new account chooses its display face before entering the app
- ✓Account settings flow for swapping an existing profile picture without uploading a photo
