Flow Docs

auth-screens

5 min read

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

ScreenFileBackgroundScaffold
Welcome / landinglib/features/onboarding/screens/welcome_screen.dartPure white (Colors.white)Plain Scaffold
Loginlib/features/auth/screens/login_screen.dartAnimated coral/violet blobsFlowAuthScaffold
Forgot passwordlib/features/auth/screens/forgot_password_screen.dartAnimated coral/violet blobsFlowAuthScaffold
Registration wizardlib/features/auth/screens/registration_wizard_screen.dartAnimated coral/violet blobsFlowAuthScaffold

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

ElementBeforeAfter
Primary CTA “Sign up”OutlinedButton (coral border) — tertiary visualCoral filled 54pt — primary
Apple / GoogleVertical stack, Apple = full-black inkBlack filledSide-by-side outline pills, both white + dividerLight border + dark icon
Headline50px / letter-spacing -2.044px / -1.5 — matches event-details hero, avoids Inter descender overlap
”Already have an account?”Muted “Sign in” word alone — near-invisibleRichText: muted prefix + coral “Accedi” verb
TermsColors.black38 hardcodedtextMuted token, w500

Login screen

  • 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 (current, post 2026-05-20)

The pre-editorial spec that used to live here (OutlinedButton primary CTA, 50px headline, black-filled Apple button, radiusFull) was superseded by the editorial pass above — one fact, one location. This section describes only the shipped design.

Layout: Column(crossAxisAlignment: CrossAxisAlignment.start) — left-aligned; only bottom text links centered.

Element order (top → bottom):

  1. Spacer(flex: 2)
  2. FlowBrandMark(height: 48, color: AppTheme.electricCoral) — coral S-wave mark, no container, no wordmark
  3. Headline Text(l10n.welcomeHeadline) — 44px, w900, inkBlack, letterSpacing: -1.5 (matches event-details hero)
  4. Rotating tagline carousel — AnimatedSwitcher + ShaderMask with brandGradient (coral→violet), 17px w600, keys welcomeCarouselLine1..4, 3 s rotation
  5. Spacer(flex: 3)
  6. Primary CTA “Sign up” — AuthPrimaryButton: coral filled, 54pt, radius14
  7. Apple / Google — side-by-side outline pills, white bg + dividerLight border + dark FaIcon
  8. “Already have an account?” — RichText: muted prefix + coral “Accedi” verb
  9. Terms Text — centered, textMuted token, w500

Animations: flutter_animate staggered entrance (brand mark fade+scale, headline fade+slideY, buttons staggered fade+slideY).

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.

Login Screen — Design Spec

  • 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

TokenValueUsed for
AppTheme.electricCoral#FF5E57Brand mark, selected chips, CTAs, error banners
AppTheme.inkBlack#18181BHeadlines, Apple button bg
AppTheme.textSecondary#52525BBody text, MDI social icons
AppTheme.textMuted#9E9E9ECaptions, placeholders
AppTheme.brandGradientcoral → violetCarousel shimmer text
AppTheme.radiusFullpillSocial buttons
AppTheme.radius1414.0Form card corners

Icon Packages

PackageUsed forImport
font_awesome_flutterFull-width Apple/Google welcome buttonsFontAwesomeIcons.apple, .google
material_design_icons_flutter3-icon social divider on login/forgotMdiIcons.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

Graph View

Backlinks