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

237
lib/ui/widgets/milestones.dart
View File

@@ -1,10 +1,10 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../data/models.dart';
import '../format.dart';
import '../tokens.dart';
import 'buttons.dart';
import 'cards.dart';
/// The customer's journey: seven milestones, not nine backend states.
///
@@ -41,7 +41,7 @@ class DmMilestones extends StatelessWidget {
/// Show at most this many rows, newest first. Null shows the whole journey.
final int? maxRows;
/// Tapped from the "All n stages" action. Null hides the action.
/// Tapped from the "Full timeline" action. Null hides the action.
final VoidCallback? onExpand;
@override
@@ -51,58 +51,71 @@ class DmMilestones extends StatelessWidget {
final milestones = CustomerMilestone.values;
final currentIndex = currentMilestone.index;
// Newest first: the current milestone, then everything already done, then
// — only if there is room — what is still to come.
final ordered = [
for (var i = currentIndex; i >= 0; i--) i,
for (var i = currentIndex + 1; i < milestones.length; i++) i,
];
final shown = maxRows == null ? ordered : ordered.take(maxRows!).toList();
// ── Chronological, because the line is the progress ──
//
// This ran newest-first, on the argument that "where is my parcel right
// now" should not be at the bottom of the list. That was right when the
// rail was a list of rows and wrong now that it is a rail: the travelled
// part of the spine is drawn crimson and the rest grey, and a reversed
// order makes a filling line read backwards. The answer is also no longer
// down here — the crimson card at the top of tracking says it outright,
// so this is free to answer the other question, which is *how far along*.
//
// Compressed, it shows the current milestone and the two before it: recent
// activity stays on screen without the rail claiming the whole page.
final ordered = [for (var i = 0; i < milestones.length; i++) i];
final shown = maxRows == null
? ordered
: ordered
.sublist(
(currentIndex - maxRows! + 1).clamp(0, milestones.length),
(currentIndex + 1).clamp(1, milestones.length),
)
.toList();
return DmCard(
children: [
DmCardCell(
padding: const EdgeInsets.fromLTRB(16, 15, 16, 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 2),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Row(
children: [
Expanded(
child: Text(
title.toUpperCase(),
style: DmText.eyebrow.copyWith(color: DmColors.brand),
),
),
if (onExpand != null && shown.length < ordered.length)
DmTextAction(
label: 'All ${milestones.length} stages',
onPressed: onExpand,
minHeight: 24,
)
else
Text(
'Step ${currentIndex + 1} of ${milestones.length}',
style: DmText.monoSm,
),
],
Expanded(
child: Text(
title.toUpperCase(),
// Neutral. It heads a rail that is deliberately receding,
// beside a crimson action — two accents on a group nobody
// is meant to study.
style: DmText.eyebrow,
),
),
const SizedBox(height: 14),
for (var n = 0; n < shown.length; n++)
_MilestoneRow(
milestone: milestones[shown[n]],
done: shown[n] < currentIndex,
isCurrent: shown[n] == currentIndex,
last: n == shown.length - 1,
time: shown[n] <= currentIndex
? relativeTime(booking.timeOf(milestones[shown[n]].firstStage))
: '',
detail: shown[n] == currentIndex ? _detailFor(current) : null,
if (onExpand != null && shown.length < ordered.length)
DmTextAction(
// Was "All 7 stages". The number counts something the
// customer has no model for — they do not know a parcel has
// seven of anything — and it changes with the backend's own
// vocabulary.
label: 'Full timeline',
onPressed: onExpand,
minHeight: 24,
),
],
),
),
],
const SizedBox(height: 16),
for (var n = 0; n < shown.length; n++)
_MilestoneRow(
milestone: milestones[shown[n]],
done: shown[n] < currentIndex,
isCurrent: shown[n] == currentIndex,
first: n == 0,
last: n == shown.length - 1,
time: shown[n] <= currentIndex
? relativeTime(booking.timeOf(milestones[shown[n]].firstStage))
: '',
detail: shown[n] == currentIndex ? _detailFor(current) : null,
),
],
),
);
}
@@ -130,11 +143,29 @@ class DmMilestones extends StatelessWidget {
};
}
/// One milestone on the spine.
///
/// ── The line is the progress bar ──
///
/// Every connector used to be the same grey hairline, which made the rail a
/// list of dots that happened to be joined up: to work out how far along a
/// parcel was you had to find the filled dots and count them. The segment
/// *above* a node is now crimson when that node has been reached and grey when
/// it has not, so the line fills from the top as the parcel moves and "how far
/// along" is answered before a single word is read.
///
/// ── Identity left, time right ──
///
/// The same split the Miler app's route rail uses: what happened on the left,
/// when it happened on the right, on one baseline. Four stacked left-aligned
/// lines make the eye walk down the block to find the time; two columns answer
/// both in one fixation, and down a rail the times stack into a scan column.
class _MilestoneRow extends StatelessWidget {
const _MilestoneRow({
required this.milestone,
required this.done,
required this.isCurrent,
required this.first,
required this.last,
required this.time,
this.detail,
@@ -143,6 +174,7 @@ class _MilestoneRow extends StatelessWidget {
final CustomerMilestone milestone;
final bool done;
final bool isCurrent;
final bool first;
final bool last;
final String time;
final String? detail;
@@ -150,22 +182,42 @@ class _MilestoneRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
final upcoming = !done && !isCurrent;
final reached = done || isCurrent;
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 12,
width: 14,
child: Column(
children: [
const SizedBox(height: 3),
// The segment above this node, which is what says whether the
// parcel has got here. Absent on the first row: a line running
// up out of the top of the rail has nowhere to come from.
SizedBox(
height: 6,
child: first
? null
: Center(
child: Container(
width: 2,
color: reached
? DmColors.brand
: DmColors.border,
),
),
),
_Marker(done: done, isCurrent: isCurrent),
if (!last)
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 3),
child: Container(width: 1.5, color: DmColors.border),
child: Center(
child: Container(
width: 2,
// Crimson only as far as the parcel has come. The
// segment below the current node is the road ahead.
color: done ? DmColors.brand : DmColors.border,
),
),
),
],
@@ -174,30 +226,47 @@ class _MilestoneRow extends StatelessWidget {
const SizedBox(width: 14),
Expanded(
child: Padding(
padding: EdgeInsets.only(bottom: last ? 0 : 15),
padding: EdgeInsets.only(top: 2, bottom: last ? 0 : 18),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Expanded(
child: Text(
milestone.label,
style: upcoming
? DmText.small.copyWith(color: DmColors.ink3)
: DmText.cardTitle.copyWith(fontSize: 14.5),
// The one happening now is the only thing on the
// rail set in the brand colour, and the only one at
// full weight. Everything behind it is history and
// everything ahead of it has not happened.
style: switch ((isCurrent, upcoming)) {
(true, _) => DmText.cardTitle.copyWith(
fontSize: 15.5,
color: DmColors.brand,
),
(_, true) => DmText.small.copyWith(
color: DmColors.ink4,
),
_ => DmText.cardTitle.copyWith(fontSize: 14.5),
},
),
),
if (time.isNotEmpty) ...[
const SizedBox(width: 10),
Text(time, style: DmText.monoSm),
Text(
time,
style: DmText.monoSm.copyWith(
color: isCurrent ? DmColors.brand : DmColors.ink3,
),
),
],
],
),
if (detail != null) ...[
const SizedBox(height: 4),
const SizedBox(height: 3),
Text(detail!, style: DmText.small),
],
],
@@ -210,6 +279,11 @@ class _MilestoneRow extends StatelessWidget {
}
}
/// The node itself.
///
/// Three states and three shapes, so the rail is readable without colour: a
/// filled disc behind you, a ring with a lit centre where you are, a hollow
/// outline ahead.
class _Marker extends StatelessWidget {
const _Marker({required this.done, required this.isCurrent});
@@ -220,23 +294,50 @@ class _Marker extends StatelessWidget {
Widget build(BuildContext context) {
if (isCurrent) {
return Container(
width: 12,
height: 12,
width: 14,
height: 14,
alignment: Alignment.center,
decoration: BoxDecoration(
color: DmColors.surface,
shape: BoxShape.circle,
border: Border.all(color: DmColors.brand, width: 2),
boxShadow: const [
BoxShadow(color: DmColors.brandSoft, spreadRadius: 3.5),
],
),
child: Container(
width: 5,
height: 5,
decoration: const BoxDecoration(
color: DmColors.brand,
shape: BoxShape.circle,
),
),
);
}
if (done) {
return Container(
width: 14,
height: 14,
alignment: Alignment.center,
decoration: const BoxDecoration(
color: DmColors.brand,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(color: DmColors.brandSoft, spreadRadius: 4),
],
),
child: const Icon(
LucideIcons.check,
size: 9,
color: Colors.white,
),
);
}
return Container(
width: 12,
height: 12,
width: 14,
height: 14,
decoration: BoxDecoration(
color: done ? DmColors.brand : DmColors.border,
color: DmColors.canvas,
shape: BoxShape.circle,
border: Border.all(color: DmColors.border, width: 2),
),
);
}