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

120
test/design_snapshot_test.dart
View File

@@ -28,7 +28,12 @@ import 'package:flutter_test/flutter_test.dart';
/// everything in Ahem's black boxes and the pictures are worthless.
Future<void> _loadFonts() async {
for (final (family, asset) in const [
('Manrope', 'assets/fonts/Manrope-VF.ttf'),
// Every cut, because Poppins is static: a FontLoader given only one file
// renders w800 headings by smearing the one weight it has.
('Poppins', 'assets/fonts/Poppins-Medium.ttf'),
('Poppins', 'assets/fonts/Poppins-SemiBold.ttf'),
('Poppins', 'assets/fonts/Poppins-Bold.ttf'),
('Poppins', 'assets/fonts/Poppins-ExtraBold.ttf'),
('GeistMono', 'assets/fonts/GeistMono-VF.ttf'),
// The icon font too, or every glyph in the picture is a hollow box.
('packages/lucide_icons_flutter/Lucide',
@@ -39,10 +44,20 @@ Future<void> _loadFonts() async {
}
}
/// Runs the clock forward until a screen has stopped moving.
///
/// Four pumps, not two. An entrance animation is started by a zero-delay
/// `Future.delayed` inside `flutter_animate`, and under the test binding's fake
/// clock that timer only fires on the pump *after* the widget was built — so
/// the controller begins life part-way through the first elapse and a two-pump
/// settle photographs the screen mid-fade. Everything here is under a second,
/// so the extra frames cost nothing and the pictures are of settled screens.
Future<void> _settle(WidgetTester tester, [int ms = 800]) async {
await tester.pump();
await tester.pump(Duration(milliseconds: ms));
await tester.pump(const Duration(milliseconds: 400));
for (var i = 0; i < 4; i++) {
await tester.pump(const Duration(milliseconds: 400));
}
}
Future<void> _shot(WidgetTester tester, String name) async {
@@ -78,18 +93,39 @@ void main() {
final state = AppState();
await tester.pumpWidget(DoormileApp(initialState: state));
await _settle(tester);
// Image.asset resolves off the frame loop, so in a test it never paints
// unless it is decoded first — without this the wordmark is a blank gap in
// every picture of the entrance.
// unless it is decoded first — without this the mark and the wordmark are
// blank gaps in every picture of the entrance.
await tester.runAsync(() async {
await precacheImage(
const AssetImage('assets/images/doormile-logo.png'),
tester.element(find.byType(MaterialApp)),
);
for (final asset in const [
'assets/images/doormile-icon.png',
'assets/images/doormile-logo.png',
]) {
await precacheImage(
AssetImage(asset),
tester.element(find.byType(MaterialApp)),
);
}
});
await _settle(tester);
// Both beats, with raw pumps: `_settle` always runs four extra 400ms
// frames at the end, which is 2.5s — past the moment the splash hands
// over, so it would photograph the login screen instead of either one.
// The clock does not start until the engine says it has rasterized a
// frame and the composition has parsed, which under the test binding is
// about 1.2s. Both shots are taken relative to that, not to pumpWidget.
await tester.pump();
await tester.pump(const Duration(milliseconds: 2000));
await _shot(tester, '00-splash-animation');
// Past the handover, plus a frame for the switch to settle.
await tester.pump(const Duration(milliseconds: 1200));
await tester.pump(const Duration(milliseconds: 400));
await _shot(tester, '00b-splash-mark');
// The splash holds for its own minimum — and the waits in front of it — before handing over.
await _settle(tester, 4400);
await _shot(tester, '01-sign-in');
await tester.tap(find.text('Create account'));
@@ -104,14 +140,18 @@ void main() {
await _settle(tester);
await _shot(tester, '02-verify');
final boxes = find.byType(TextField);
for (var i = 0; i < 4; i++) {
await tester.enterText(boxes.at(i), '1');
await tester.pump();
}
await tester.enterText(find.byType(TextField).first, '1111');
await _settle(tester);
await _shot(tester, '03-home');
// The pickup address is a live value in the header, so the search that
// changes it is reachable from Home rather than only from the booking.
await tester.tap(find.text('38 Mettupalayam Road'));
await _settle(tester);
await _shot(tester, '03b-pickup-search');
await tester.tapAt(const Offset(200, 40)); // through the scrim
await _settle(tester);
await tester.tap(find.text('Orders'));
await _settle(tester);
await _shot(tester, '04-orders');
@@ -125,33 +165,50 @@ void main() {
await tester.tap(find.text('Miler assigned'));
await _settle(tester);
await _shot(tester, '06-tracking');
await tester.dragUntilVisible(
find.text('Cancel this pickup'),
find.byType(Scrollable).first,
const Offset(0, -200),
);
await tester.tap(find.text('Cancel this pickup'));
await _settle(tester);
await _shot(tester, '06b-cancel-sheet');
await tester.tapAt(const Offset(200, 40));
await _settle(tester);
await tester.tap(find.byIcon(LucideIcons.arrowLeft).first);
await _settle(tester);
// Booking: one screen, plus the two escape hatches.
await tester.tap(find.text('Start booking'));
// Booking: state, district, window, then one screen.
await tester.tap(find.text('BOOK'));
await _settle(tester);
await _shot(tester, '07-send-empty');
await _shot(tester, '07-destination-states');
await tester.tap(find.text('Tamil Nadu'));
await _settle(tester);
await _shot(tester, '07b-destination-districts');
await tester.tap(find.text('Chennai').first);
await _settle(tester);
await _shot(tester, '08-send-ready');
// The window row is below the fold on a phone, and a ListView does not
// build what it has not reached.
// The window already carries the first available slot, so scroll to the
// package row beneath it — a string that is there either way.
await tester.dragUntilVisible(
find.text('1 package'),
find.byType(Scrollable).first,
const Offset(0, -220),
);
await _settle(tester);
await tester.tap(find.text('Change').last);
// The dev backend allows several destinations, so the row ticked rather
// than closing the sheet — the choice is confirmed.
await tester.tap(find.textContaining('Send to ').first);
await _settle(tester);
// The window sheet follows the destination on its own: the customer
// chooses their slot, it is never chosen for them.
await _shot(tester, '09-window-sheet');
await tester.tap(find.textContaining('Use ').first);
await _settle(tester);
await _shot(tester, '08-send');
// The map editor behind the FROM row: the one screen in the flow whose
// subject is a picture.
await tester.tap(find.text('FROM'));
await _settle(tester);
await _shot(tester, '10-pickup-map');
await tester.tap(find.byIcon(LucideIcons.arrowLeft).first);
await _settle(tester);
await tester.tap(find.text('Book pickup'));
await _settle(tester);
@@ -164,6 +221,7 @@ void main() {
await _settle(tester);
await tester.tap(find.text('Completed'));
await _settle(tester);
await _shot(tester, '04b-orders-completed');
await tester.tap(find.text('Salem, Tamil Nadu'));
await _settle(tester);
await _shot(tester, '12-receipt');