Doormile/doormile_customer_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign: Poppins, a two-step destination, and a splash that says what the app does

Browse Source 
The effort pass, end to end. Every screen was run through one test — if I
remove this sentence, does the customer make a worse decision? — and the parts
that failed it are gone.

The flow

  Home ▸ BOOK ▸ Where is it going? ▸ When shall we collect? ▸ details ▸ booked

BOOK opens a sheet, not a form. The destination is browsed state-then-district
because a flat list of every serviceable district survives twelve and not
sixty, and search cuts across states because somebody who knows they are
sending to Chennai should not have to know which state it is in. Districts
multi-select, but only where the server allows it: BookingLimits advertises
maxDestinations: 1 until the Miler build keys on consignmentid, and a sheet
that ignored that would sell a booking the network cannot complete.

The pickup window is now a step the customer answers rather than a slot chosen
for them. A pickup window is a promise about somebody's afternoon.

What the screens stopped saying

Home lost the orb caption for returning customers and a four-cell live card.
Send lost the city strip, both address fields, the optional disclosure and
three sentences about charging — the route, the packages and the button are
what is left. Tracking lost a radar with a bike in it, a Milers-in-your-zone
count, a "Step 2 of 7" and a sentence describing the screen you were looking
at. The window sheet lost "Fastest pickup", "4 Milers nearby" and "Relaxed
evening handover".

Type

Poppins, which has no variable release — four static cuts, and the sans styles
set fontWeight alone because fontVariations on a static font is ignored in
silence. Every weight dropped a step and the tracking went deeper: Poppins is
built on near-circles and carries more ink than the humanist faces before it.

Objects

One lit sphere on Home, and the primary button now takes its gradient and rim
because a committing action that is not lit like the hero reads as a different
material. The tracking rail's connector is crimson as far as the parcel has
come, so the line is the progress bar. Confirmation is a white tick on green:
crimson is this app's action colour and that screen has nothing left to do.

Bugs found on the way

The OTP screen dropped digits. Four fields passing focus along lose a keystroke
that arrives mid-transition, so "1234" became "124" and the screen answered
"That code did not match" — blaming the customer for its own race. One field
now, four boxes that only draw.

Nothing ever asked for the customer's location: detectPickupLocation was the
OTP screen's job, so a restored session or an auto-login never triggered the
permission prompt and the pickup map had nothing to centre on.

The launcher icon and both splash screens pointed at a house drawn as two
vector paths — a placeholder that shipped.

The splash clock started when the widget was built rather than when it was
visible, so the truck got 0.45s of a 1.8s beat behind Android's own splash.
It waits on waitUntilFirstFrameRasterized now, raced against a timeout so a
binding that never reports one cannot strand the app.

Also: design/screens/ holds all 19 screens under readable names, tool/ has the
scripts that refresh them and rebrand the Lottie, and DESIGN.md is current.

flutter analyze clean. 88 tests, 1 skipped.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EqVJPB9B4QuieZnBAAKgYQ
This commit is contained in:
Thiru-tenext
2026-09-22 17:45:54 +05:30
parent 8207e27a97
commit 06fa6b797a
107 changed files with 4597 additions and 2071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
lib/ui/tokens.dart
View File

@@ -17,7 +17,7 @@ import 'package:flutter/material.dart';
/// meaning — `ok` survives only for the delivered state, `danger` only for
/// destructive text.
///
/// **Manrope for voice, Geist Mono for data.** Headings run at w800 with tight
/// **Poppins for voice, Geist Mono for data.** Headings run at w800 with tight
/// negative tracking; anything a customer might read back aloud or check
/// digit-by-digit — a booking reference, a phone number, a fare, a plate, a
/// countdown — is set in mono so the glyphs line up and a transposed character
@@ -98,28 +98,38 @@ class DmColors {
class DmRadius {
DmRadius._();
// Every corner was opened up on 2026-09-22. At 8–12 the app measured
// correct and looked like a form: a screen of tight rectangles, which is
// exactly the "boxy" the redesign was called in to fix. Four points across
// the scale is the difference between a panel and a card, and it costs
// nothing but the token.
/// Tiles, chips, the small square that holds a glyph.
static const xs = 8.0;
static const xs = 10.0;
/// Buttons, fields, icon buttons. The design's most-used corner.
static const sm = 9.0;
static const sm = 12.0;
/// Cards and every panel that holds rows.
static const md = 10.0;
static const md = 14.0;
/// Sheets' grabber area, the segmented control, the header's bottom sweep.
static const lg = 12.0;
static const lg = 16.0;
/// Bottom sheets and the auth sheet that overlaps the hero.
static const xl = 16.0;
/// Bottom sheets and the auth sheet that overlaps the hero. Moved with the
/// scale — at 16 it had collided with [lg], and a sheet that shares a corner
/// with the cards inside it has stopped being a separate surface.
static const xl = 20.0;
/// The brand header's bottom corners.
static const header = 18.0;
static const header = 26.0;
static const pill = 999.0;
/// Kept for call sites that mean "a primary bar's corner".
static const book = sm;
/// A primary bar's corner. Softer than a field's, because the committing
/// action is the one element on a screen allowed to look like an object
/// rather than part of the form.
static const book = 16.0;
static BorderRadius all(double r) => BorderRadius.circular(r);
}
@@ -199,27 +209,59 @@ class DmMotion {
/// The bottom nav's travelling pill — a touch of overshoot, which reads as
/// the indicator catching up rather than teleporting.
static const glide = Cubic(0.34, 1.06, 0.36, 1);
/// Screen transitions. An emphasised decelerate: it leaves quickly and
/// settles slowly, so a push feels driven at the start and arrived-at by the
/// end. `easeOutCubic` is too even across a distance this short — it reads
/// as a constant-speed slide.
static const enter = Cubic(0.05, 0.7, 0.1, 1);
}
/// Manrope for voice, Geist Mono for data.
/// Poppins for voice, Geist Mono for data.
///
/// Both ship as single variable-font files, which is why every style below sets
/// `fontVariations` as well as `fontWeight` — see the note inside the class.
/// ── Why the sans styles look different from the mono ones ──
///
/// Poppins has no variable release. Google Fonts ships it as static cuts only,
/// so the sans styles below set `fontWeight` and nothing else: there is no
/// `wght` axis to move, and `fontVariations` on a static font is ignored in
/// silence, which is worse than useless — it reads as if it were doing the
/// work. `pubspec.yaml` declares one file per weight and Flutter matches on the
/// enum. Geist Mono is still variable and its three styles still carry the axis.
///
/// Only the four weights the design uses are bundled — 500, 600, 700, 800 —
/// because each one is a separate ~155 KB file. Asking for w900 anywhere would
/// not fail; Flutter would quietly synthesise it from Bold, and it would look
/// like it.
///
/// ── Every weight is one step lighter than it was ──
///
/// Poppins is a geometric face built on near-circles, and it carries far more
/// ink at the same nominal weight than the humanist faces before it. Styles
/// that were w900 are w800, w800 are w700, w700 are w600. Set at the old
/// numbers the headings looked inflated rather than strong.
///
/// ── And the tracking is deeper again ──
///
/// The opposite correction from the last face. Poppins is wide, round and has
/// generous default sidebearings, so display sizes need pulling in harder than
/// anything this app has used — the header runs at −1.2. Body sizes stay near
/// zero, because the same roundness is what makes it legible small and tracking
/// it in takes that back. Tracking belongs to a typeface, not to a design.
class DmText {
DmText._();
static const _f = 'Manrope';
static const _f = 'Poppins';
static const _mono = 'GeistMono';
// The weight axis. Manrope and Geist Mono both ship as variable fonts, so a
// The weight axis, for Geist Mono only. It ships as one variable file, so a
// style has to move `wght` to change weight — `fontWeight` alone picks the
// nearest named instance and, on a single-file VF, that is always the
// default. Both are set on every style: the axis does the work, the enum
// keeps the semantics (and the system-font fallback) correct.
// default. Both are set on its styles: the axis does the work, the enum keeps
// the semantics (and the system-font fallback) correct.
//
// Poppins needs none of this. It is four static files and Flutter matches
// them on `fontWeight`.
static const _w500 = [FontVariation('wght', 500)];
static const _w600 = [FontVariation('wght', 600)];
static const _w700 = [FontVariation('wght', 700)];
static const _w800 = [FontVariation('wght', 800)];
// Letter spacing is quoted in em by the design and converted here at each
// size, because -0.035em is a different number of pixels on a 31pt display
@@ -230,23 +272,23 @@ class DmText {
/// Screen-dominating statement — "Pickup booked", "Arun is 12 minutes away".
static const display = TextStyle(
fontFamily: _f, fontSize: 31, height: 1.12,
fontWeight: FontWeight.w800, fontVariations: _w800,
letterSpacing: -1.09, color: DmColors.ink,
fontFamily: _f, fontSize: 31, height: 1.1,
fontWeight: FontWeight.w800,
letterSpacing: -0.95, color: DmColors.ink,
);
/// The brand header's own title, sitting on crimson.
static const headerTitle = TextStyle(
fontFamily: _f, fontSize: 34, height: 1.0,
fontWeight: FontWeight.w800, fontVariations: _w800,
letterSpacing: -1.36, color: Colors.white,
fontWeight: FontWeight.w800,
letterSpacing: -1.2, color: Colors.white,
);
/// Screen headings on a canvas.
static const title = TextStyle(
fontFamily: _f, fontSize: 25, height: 1.18,
fontWeight: FontWeight.w800, fontVariations: _w800,
letterSpacing: -0.75, color: DmColors.ink,
fontFamily: _f, fontSize: 25, height: 1.16,
fontWeight: FontWeight.w800,
letterSpacing: -0.65, color: DmColors.ink,
);
/// Tab-root page titles where no brand header is used.
@@ -255,14 +297,14 @@ class DmText {
/// The heading above a group of cards, and a sheet's own title.
static const heading = TextStyle(
fontFamily: _f, fontSize: 18, height: 1.25,
fontWeight: FontWeight.w700, fontVariations: _w700,
letterSpacing: -0.45, color: DmColors.ink,
fontWeight: FontWeight.w700,
letterSpacing: -0.4, color: DmColors.ink,
);
static const sheetTitle = TextStyle(
fontFamily: _f, fontSize: 19, height: 1.2,
fontWeight: FontWeight.w800, fontVariations: _w800,
letterSpacing: -0.57, color: DmColors.ink,
fontFamily: _f, fontSize: 21, height: 1.2,
fontWeight: FontWeight.w800,
letterSpacing: -0.55, color: DmColors.ink,
);
// ── Rows ─────────────────────────────────────────────────────────────────
@@ -270,8 +312,8 @@ class DmText {
/// A row's own line — `t1` in the design, and the workhorse of the app.
static const cardTitle = TextStyle(
fontFamily: _f, fontSize: 15, height: 1.4,
fontWeight: FontWeight.w700, fontVariations: _w700,
letterSpacing: -0.18, color: DmColors.ink,
fontWeight: FontWeight.w600,
letterSpacing: -0.15, color: DmColors.ink,
);
/// Alias: the same weight of statement, used mid-form.
@@ -279,55 +321,55 @@ class DmText {
static const body = TextStyle(
fontFamily: _f, fontSize: 15, height: 1.5,
fontWeight: FontWeight.w500, fontVariations: _w500,
letterSpacing: -0.12, color: DmColors.ink,
fontWeight: FontWeight.w500,
letterSpacing: -0.1, color: DmColors.ink,
);
/// Supporting line under a row title — `t2`.
static const small = TextStyle(
fontFamily: _f, fontSize: 13.5, height: 1.45,
fontWeight: FontWeight.w500, fontVariations: _w500,
fontWeight: FontWeight.w500,
color: DmColors.ink2,
);
/// The quietest line — `t3`. Timestamps, counts, "collected on".
static const tiny = TextStyle(
fontFamily: _f, fontSize: 13, height: 1.4,
fontWeight: FontWeight.w500, fontVariations: _w500,
fontWeight: FontWeight.w500,
color: DmColors.ink3,
);
/// Paragraph under a screen heading.
static const lede = TextStyle(
fontFamily: _f, fontSize: 14.5, height: 1.55,
fontWeight: FontWeight.w500, fontVariations: _w500,
fontWeight: FontWeight.w500,
color: DmColors.ink2,
);
/// The right-hand value in a settings row.
static const value = TextStyle(
fontFamily: _f, fontSize: 13.5, height: 1.4,
fontWeight: FontWeight.w600, fontVariations: _w600,
fontWeight: FontWeight.w600,
color: DmColors.ink2,
);
/// Field labels, tags, chips, inline actions.
static const label = TextStyle(
fontFamily: _f, fontSize: 12.5, height: 1.3,
fontWeight: FontWeight.w700, fontVariations: _w700,
fontWeight: FontWeight.w600,
color: DmColors.ink2,
);
static const button = TextStyle(
fontFamily: _f, fontSize: 15.5, height: 1.2,
fontWeight: FontWeight.w700, fontVariations: _w700,
letterSpacing: -0.23,
fontFamily: _f, fontSize: 16, height: 1.2,
fontWeight: FontWeight.w700,
letterSpacing: -0.2,
);
/// The text-only action under a primary button ("Back to home").
static const textButton = TextStyle(
fontFamily: _f, fontSize: 14.5, height: 1.2,
fontWeight: FontWeight.w700, fontVariations: _w700,
fontWeight: FontWeight.w600,
color: DmColors.ink2,
);
@@ -335,22 +377,22 @@ class DmText {
/// it heads brand content, [DmColors.ink3] when it heads a neutral group.
static const eyebrow = TextStyle(
fontFamily: _f, fontSize: 10.5, height: 1.3,
fontWeight: FontWeight.w700, fontVariations: _w700,
fontWeight: FontWeight.w600,
letterSpacing: 1.16, color: DmColors.ink3,
);
/// The eyebrow as it appears on the crimson header.
static const headerEyebrow = TextStyle(
fontFamily: _f, fontSize: 11.5, height: 1.3,
fontWeight: FontWeight.w800, fontVariations: _w800,
fontWeight: FontWeight.w700,
letterSpacing: 1.84, color: DmColors.onBrand3,
);
/// Sentence-case heading above a group of rows.
static const sectionHead = TextStyle(
fontFamily: _f, fontSize: 15, height: 1.3,
fontWeight: FontWeight.w700, fontVariations: _w700,
letterSpacing: -0.3, color: DmColors.ink,
fontWeight: FontWeight.w700,
letterSpacing: -0.25, color: DmColors.ink,
);
/// Alias kept for existing call sites.
@@ -359,7 +401,7 @@ class DmText {
/// Field input text.
static const field = TextStyle(
fontFamily: _f, fontSize: 16, height: 1.3,
fontWeight: FontWeight.w600, fontVariations: _w600,
fontWeight: FontWeight.w600,
color: DmColors.ink,
);
@@ -389,7 +431,7 @@ class DmText {
/// The OTP digits.
static const otp = TextStyle(
fontFamily: _f, fontSize: 24, height: 1.1,
fontWeight: FontWeight.w700, fontVariations: _w700,
fontWeight: FontWeight.w600,
color: DmColors.ink,
);
}