auth-screens

Summary

Single source of truth for the visual design of the four auth screens. All screens are part of the edit/mobile-audit-ux-polish deep-rework restored at commit 841ec58. For wizard business logic (validation, state machine, tag ordering) see feat-registration-wizard-v2.

Screen Inventory

Screen	File	Background	Scaffold
Welcome / landing	`lib/features/onboarding/screens/welcome_screen.dart`	Pure white (`Colors.white`)	Plain `Scaffold`
Login	`lib/features/auth/screens/login_screen.dart`	Animated coral/violet blobs	`FlowAuthScaffold`
Forgot password	`lib/features/auth/screens/forgot_password_screen.dart`	Animated coral/violet blobs	`FlowAuthScaffold`
Registration wizard	`lib/features/auth/screens/registration_wizard_screen.dart`	Animated coral/violet blobs	`FlowAuthScaffold`

The welcome screen does NOT use FlowAuthScaffold. It uses a plain Scaffold(backgroundColor: Colors.white) intentionally — it is the marketing-first entry point, not an auth form.

2026-05-20 — Editorial pass + shared auth widgets

End-to-end visual rewrite of welcome / login / forgot. Two shared widgets extract the cross-screen contract so the flow reads as one product.

Shared widgets

lib/shared/widgets/auth_text_field.dart exports AuthTextField (+ .email / .password factories):

Resting: pureWhite fill, 1px dividerLight border, radius14.
Focused: coral 1.5px border + soft coral glow (12px blur, 0.12 alpha). Small-caps label flips coral.
Cursor color coral; error text coral.

Identical visual contract to the crew wizard’s _BrandedTextField. Replace CustomTextField / EmailTextField / PasswordTextField in auth flows.

lib/shared/widgets/auth_primary_button.dart exports AuthPrimaryButton and AuthTextLink:

AuthPrimaryButton — 54pt coral filled, radius14, 16pt/w800/+0.2, built-in loading state.
AuthTextLink — coral text-as-action with compact tap target.

Welcome screen — hierarchy inversion

Element	Before	After
Primary CTA “Sign up”	`OutlinedButton` (coral border) — tertiary visual	Coral filled 54pt — primary
Apple / Google	Vertical stack, Apple = full-black `inkBlack` filled	Side-by-side outline pills, both white + dividerLight border + dark icon
Headline	50px / letter-spacing -2.0	44px / -1.5 — matches event-details hero, avoids Inter descender overlap
”Already have an account?”	Muted “Sign in” word alone — near-invisible	RichText: muted prefix + coral “Accedi” verb
Terms	`Colors.black38` hardcoded	`textMuted` token, w500

Uses AuthTextField.email / .password + AuthPrimaryButton.
CTA radius normalized radiusFull → radius14.
“Don’t have an account? Sign up” follows the welcome pattern (RichText + GestureDetector).

Forgot password screen

Uses AuthTextField.email + AuthPrimaryButton.
Hardcoded Italian 'Torna al login' → l10n.backToLogin (new key, en/it/es).
Success state now shows the actual submitted email (was the literal label “Email”).

Out of scope

Registration wizard (1129 lines) left untouched — deserves a dedicated pass.

flutter analyze: 0 issues.

Welcome Screen — Design Spec

Layout: Column(crossAxisAlignment: CrossAxisAlignment.start) — every element left-aligned. No centering except the bottom text links.

Element order (top → bottom):

Spacer(flex: 2)
FlowBrandMark(height: 48, color: AppTheme.electricCoral) — coral S-wave mark, no container square, no wordmark
SizedBox(height: 40)
Headline Text(l10n.welcomeHeadline) — 50px, FontWeight.w900, AppTheme.inkBlack, letterSpacing: -2.0, height: 1.0
SizedBox(height: 12)
Carousel SizedBox(height: 32) — AnimatedSwitcher + FadeTransition, single rotating tagline:
- ShaderMask with AppTheme.brandGradient (coral→violet) applied via BlendMode.srcIn
- 17px, FontWeight.w600, maxLines: 1
- Keys: welcomeCarouselLine1 through welcomeCarouselLine4, rotated every 3 s
Spacer(flex: 3)
_SocialButton — Apple (black bg, white text, FontAwesomeIcons.apple)
SizedBox(height: 12)
_SocialButton — Google (white bg, black text, borderColor: Colors.black12, FontAwesomeIcons.google)
SizedBox(height: 28)
OutlinedButton → context.push('/auth/register') — l10n.welcomeRegister, coral outline (electricCoral, 1.5px), full width, 52 h, radiusFull, FontWeight.w700 15px, stagger .fadeIn+slideY(delay: 420ms)
SizedBox(height: 10)
TextButton (centered) → context.push('/auth/login') — l10n.welcomeLogin, textMuted, 14px, .fadeIn(delay: 500ms)
SizedBox(height: 12)
Terms Text — centered, 10px, Colors.black38

_SocialButton widget:

SizedBox(width: double.infinity, height: 54)
Material + InkWell with borderRadius: AppTheme.radiusFull
FaIcon (from font_awesome_flutter) + Text row, centered

Animations: flutter_animate entrance: brand mark .fadeIn(500ms).scaleXY(0.88→1), headline .fadeIn+slideY, buttons .fadeIn+slideY staggered at 220ms / 320ms, email link .fadeIn(500ms).

FlowAuthScaffold — Design Spec

Used by login, forgot-password, and wizard screens. Provides:

Animated coral (#FF5E57) and violet (#8A2BE2) blob background
showWatermark bool — renders FlowBrandMark in top-left when true
Scrollable safe-area content wrapper

The wizard passes showWatermark: provider.currentStep == WizardStep.welcome so the brand mark only appears on the first step.

FlowAuthScaffold with brand mark visible
Card-style form panel: white bg, radius14, soft shadow
Fields: email (TextFormField), password with show/hide toggle
Primary CTA: coral filled button, full width
Divider row: Row with Divider + l10n.orContinueWith label
Social icon row: 3 IconButtons — MdiIcons.google, MdiIcons.apple, MdiIcons.facebook (from material_design_icons_flutter)
- Icons are monochrome AppTheme.textSecondary — not brand-colored
Footer links: “Forgot password” + “Don’t have an account? Register”

The 3-icon social row on login/forgot uses MDI icons (material_design_icons_flutter). The full-width social buttons on the welcome screen use FontAwesome (font_awesome_flutter). Both packages are active deps.

Forgot Password Screen — Design Spec

FlowAuthScaffold + FlowBrandMark visible
Single email field, descriptive subtitle
Coral CTA: “Send reset link”
Back link to login

Registration Wizard — Design Spec

For full step definitions, validation logic, and state machine see feat-registration-wizard-v2.

Visual constants across all steps:

FlowAuthScaffold(showWatermark: provider.currentStep == WizardStep.welcome)
Progress bar: linear, coral, top of the form area
Step transitions: AnimatedSwitcher with KeyedSubtree(key: ValueKey('${step.name}_$pageIndex'))
Error banner: coral background, Icons.error_outline_rounded, above CTA
CTA spinner replaces button when isValidating || isSubmitting

Tag chips (_tagChip):

Selected: electricCoral fill, white label, FontWeight.w600, no checkmark
Unselected: white fill, textPrimary label, FontWeight.w400, dividerLight border
Shape: RoundedRectangleBorder(borderRadius: 20) — pill

Brand Tokens Used

Token	Value	Used for
`AppTheme.electricCoral`	`#FF5E57`	Brand mark, selected chips, CTAs, error banners
`AppTheme.inkBlack`	`#18181B`	Headlines, Apple button bg
`AppTheme.textSecondary`	`#52525B`	Body text, MDI social icons
`AppTheme.textMuted`	`#9E9E9E`	Captions, placeholders
`AppTheme.brandGradient`	coral → violet	Carousel shimmer text
`AppTheme.radiusFull`	pill	Social buttons
`AppTheme.radius14`	14.0	Form card corners

Icon Packages

Package	Used for	Import
`font_awesome_flutter`	Full-width Apple/Google welcome buttons	`FontAwesomeIcons.apple`, `.google`
`material_design_icons_flutter`	3-icon social divider on login/forgot	`MdiIcons.google`, `.apple`, `.facebook`

l10n Keys — Auth Screens

Keys specific to auth screens (all in app_en.arb, app_it.arb, app_es.arb):

welcomeHeadline          welcomeCarouselLine1–4
continueWithApple        continueWithGoogle
appleSignInComingSoon    googleSignInComingSoon
signInWithEmail          readTerms            acceptPrivacy
orContinueWith           continueWithFacebook  socialSignInComingSoon
byUsingYouAccept         welcomeRegister       welcomeLogin

For wizard-specific keys (validation messages, step labels) see feat-registration-wizard-v2.

feat-registration-wizard-v2 — wizard business logic, state, validation refactor-theme-tokens — full token reference localization — ARB workflow and key conventions

Flow Docs

Explorer

auth-screens

Summary

Screen Inventory

2026-05-20 — Editorial pass + shared auth widgets

Shared widgets

Welcome screen — hierarchy inversion

Forgot password screen

Out of scope

Welcome Screen — Design Spec

FlowAuthScaffold — Design Spec

Forgot Password Screen — Design Spec

Registration Wizard — Design Spec

Brand Tokens Used

Icon Packages

l10n Keys — Auth Screens

Graph View

Table of Contents

Backlinks

Flow Docs

Explorer

auth-screens

Summary

Screen Inventory

2026-05-20 — Editorial pass + shared auth widgets

Shared widgets

Welcome screen — hierarchy inversion

Login screen

Forgot password screen

Out of scope

Welcome Screen — Design Spec

FlowAuthScaffold — Design Spec

Login Screen — Design Spec

Forgot Password Screen — Design Spec

Registration Wizard — Design Spec

Brand Tokens Used

Icon Packages

l10n Keys — Auth Screens

Related

Graph View

Table of Contents

Backlinks