Flow Docs

UI Redesign Pass 1 — Nav + Profile

3 min read

UI Redesign Pass 1

Design alignment pass matching the new reference screenshots (warm, light, decisive branding).

Changes

1. Bottom Nav — Circle + Button + Lightning Icon

File: lib/shared/widgets/flow_bottom_nav.dart

BeforeAfter
Rounded-rect gradient pill (radius16, coral→violet)Solid coral circle (BoxShape.circle, 48×48)
Shadow: electricViolet 30% αShadow: electricCoral 35% α (echoes fill)
Icon at position 3: Icons.people_alt_roundedIcons.bolt_rounded (activity / social pulse)
Button width: 44px48px

Why: The gradient was reserved for top-hierarchy CTAs. The + button is a persistent, ambient affordance — solid coral at circle shape gives it the right visual weight without shouting. The bolt icon better communicates “what’s happening / social activity” at the navigation level, matching the reference design.

2. Profile Screen — Centered Hero Card

File: lib/features/profile/screens/profile_screen.dart

Layout change

Before:                          After:
┌─────────────────────────────┐  ┌─────────────────────────────┐
│ [Avatar] Name               │  │        [Avatar]             │
│          @handle            │  │         Name  ✓             │
│          [FlowScore]        │  │         @handle             │
│          [Edit Profile btn] │  │   Amici 12 | Frequentati 8  │
└─────────────────────────────┘  │        [FlowScore]          │
┌─────────────────────────────┐  │  [● Modifica Profilo] [⬆]  │
│ Stats (friends only)        │  └─────────────────────────────┘
└─────────────────────────────┘

Key decisions

  • Centered column avatar: Instagram/Strava model — identity first, avatar at top center. Previous horizontal layout was generic; centered avatar is a stronger brand signature.
  • Radius 52 → 44: Slightly larger to anchor the centered layout.
  • Two-column stats (Amici | Frequentati): Replaces the standalone stats sliver card. Uses IntrinsicHeight + VerticalDivider for clean visual separation. user.stats.eventsAttended was already tracked in the model but never surfaced in the UI.
  • Black pill “Modifica Profilo”: inkBlack fill + radiusFull border radius. Decisive, high-contrast. Replaces the flat warmCanvas button (too low-contrast, looked optional).
  • Share circle button (48×48, warmCanvas): Secondary affordance next to edit. Calls Share.share() with https://flowapp.it/u/<username>.
  • Dead code removed: _buildStatsCard + _buildSocialStats — absorbed into _buildMeCard → one less sliver, simpler widget tree.

L10n additions

Added eventsAttendedLabel to all three ARBs:

  • en: “Attended”
  • it: “Frequentati”
  • es: “Asistidos”

What was not changed

  • _buildSplitButtonsCard (crews / events action cards) — kept as-is for now; will be revisited in a later pass
  • _buildB2BBanner — kept as-is
  • Settings list — kept as-is

3. Search Screen — Gradient Bento Cards + Branded Chips

File: lib/features/search/screens/search_screen.dart

Bento discovery grid

BeforeAfter
color.withValues(alpha: 0.1) bg + invisible 15% borderFull LinearGradient(color → color.darken(0.18)) fill
Shadow: noneColor-echo shadow (28% α, blurRadius 18, offset (0,6))
Icon: color in white circleWhite icon in Colors.white.withValues(0.2) circle
Title: color.darken(0.2) textWhite text (w900, letterSpacing -0.3)
Subtitle: color.darken(0.1).withValues(0.6)Colors.white.withValues(0.72)

Why: 10% tint backgrounds lose all energy; they’re barely visible. A full-saturation gradient establishes each tile as its own confident surface. White text on dark-ish gradient is always more legible than darken()-tinted text on a pale wash. The colour-echo shadow grounds each tile in 3D space at near-zero cost.

Trend chips

  • Replaced default ActionChip with custom pill container
  • pureWhite bg, radiusFull, thin inkBlack 8% border, soft shadow
  • FontWeight.w700, size 14 — matches VibeFilterBar chip style

Dead code removed

_buildRecentSearchChip (was // ignore: unused_element) deleted.

Brand mark audit (AppBar)

FlowBrandLockup(height: 22) in Feed AppBar is correct — full lockup (mark + wordmark) belongs on the primary screen’s AppBar. No change needed.

Next up (planned)

  • All-screens aesthetic pass: settings, auth, events, notifications
  • Settings screen header upgrade (currently plain “Impostazioni” text)
  • Auth screens: branded onboarding flow review

Graph View

Backlinks