Cineo · Choose Your Plan
Cineo · Choose Your Plan is a production-ready Streaming Flutter screen from FlutterKit Pro, installable with flutterkit add stream-auth-plan-select.
Choose Your Plan is step 2 of Cineo's sign-up flow, the screen where a new subscriber picks a streaming tier. A slim _TopBar carries a back arrow and a muted "Step 2 of 3" progress label. Below it an "Choose your plan" headline and the subline "Switch or cancel anytime. Prices shown per month." sit above a scrolling ListView of three _PlanCard widgets: Mobile ($5.99), Standard ($12.99) and Premium ($19.99). Each card pairs a custom _Radio (a ringed circle that fills to a red check when active) with the tier name, a gold _BestBadge "BEST VALUE" ribbon on the recommended Standard tier, two _SpecLine rows using hd_rounded and devices_rounded icons for resolution and simultaneous screens, and a right-aligned price with a /month caption. Tapping a card runs setState, animating its border to a 2px red accent via AnimatedContainer. A pinned bottom bar, separated by a hairline top border, echoes the selected plan name and price as a Text.rich span, then a full-width gradient _PrimaryButton labelled Continue. It is self-contained pure Flutter: bundled Inter font, its own cinematic dark theme (#0B0B0F background, #16161D surfaces, Netflix-style #E50914 brand red, #F5C518 gold), SafeArea, overflow-proof scrolling and no network images. Back and Continue are exposed as injected onBack / onContinue callbacks, making it a backend-agnostic drop-in.
Reveal the one-line command to drop this screen into your project.
Licensed for unlimited commercial projects · resale prohibited · License
What's included
- ✓Three tap-selectable _PlanCard tiers (Mobile, Standard, Premium) driving a single _selected index via setState
- ✓Custom _Radio indicator that fills to a red circle with a check_rounded tick when its card is active
- ✓Gold _BestBadge "BEST VALUE" ribbon rendered only on the recommended Standard tier
- ✓_SpecLine rows with hd_rounded and devices_rounded icons listing resolution and simultaneous screens per plan
- ✓Pinned bottom summary bar echoing the chosen plan name and price plus a gradient _PrimaryButton Continue
- ✓Bundled Inter font, own dark theme constants, SafeArea, and injected onBack / onContinue callbacks
Use cases
- ✓Subscription onboarding step where a new streaming user selects a monthly tier before payment
- ✓Upgrade or downgrade flow letting existing members switch between Mobile, Standard and Premium
- ✓Paywall shown after a free trial to convert viewers into a paid plan
- ✓Reusable tiered-pricing selector for any Flutter app offering multiple subscription levels
