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

29
lib/ui/screens/auth/auth_scaffold.dart
View File

@@ -1,7 +1,9 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import 'package:flutter/services.dart';
import '../../../data/app_config.dart';
import '../../tokens.dart';
import '../../widgets/chrome.dart';
@@ -177,6 +179,33 @@ class AuthScaffold extends StatelessWidget {
),
child: footer!,
),
// Which build this is, on the one screen that cannot
// reach the Account panel that normally says so.
//
// The offline build and the real one are identical
// here, and the difference decides whether 1234 signs
// you in or the server refuses it — which has cost two
// rounds of "the code does not work" already. Debug
// only: `kReleaseMode` takes it out of anything that
// could ship.
if (!kReleaseMode)
Padding(
padding: EdgeInsets.fromLTRB(
DmSpace.pad,
0,
DmSpace.pad,
6 + _lift,
),
child: Text(
AppConfig.describe,
textAlign: TextAlign.center,
style: DmText.monoSm.copyWith(
fontSize: 10,
color: DmColors.ink4,
),
maxLines: 2,
),
),
],
),
),

195
lib/ui/screens/auth/otp_screen.dart
View File

@@ -43,29 +43,39 @@ class OtpScreen extends StatefulWidget {
class _OtpScreenState extends State<OtpScreen> {
late OtpChallenge _challenge = widget.challenge;
late final _boxes = List.generate(
_challenge.codeLength,
(_) => TextEditingController(),
);
late final _focus = List.generate(
_challenge.codeLength,
(_) => FocusNode(),
);
// ── One field, four boxes that only draw ──
//
// This was four separate `TextField`s, each holding one digit and moving
// focus to the next on change. It dropped digits. Type "1234" at any speed a
// real thumb manages and a keystroke lands while focus is still in flight
// between two boxes: it either goes nowhere, or it arrives in the box you
// just left, making that box's value two characters long — which the handler
// read as a *paste* and used to overwrite the whole row. The code ended up
// three digits, and three digits is refused with "That code did not match",
// so the screen blamed the customer for its own bug.
//
// There is one controller now. The boxes below are display: they read a
// character out of [_code] and draw it. Nothing moves focus, so nothing can
// be dropped between two things that have it. Paste works because pasting
// into one field is just text, and [AutofillHints.oneTimeCode] can fill it
// from an SMS for the same reason.
final _code = TextEditingController();
final _node = FocusNode();
Timer? _ticker;
late int _resendIn = _challenge.resendAfterSeconds;
bool _verifying = false;
int get _length => _boxes.length;
int get _length => _challenge.codeLength;
String get _code => _boxes.map((c) => c.text).join();
bool get _complete => _code.length == _length;
String get _digits => _code.text;
bool get _complete => _digits.length == _length;
@override
void initState() {
super.initState();
_startResendTimer();
WidgetsBinding.instance.addPostFrameCallback((_) => _focus.first.requestFocus());
WidgetsBinding.instance.addPostFrameCallback((_) => _node.requestFocus());
}
void _startResendTimer() {
@@ -82,12 +92,8 @@ class _OtpScreenState extends State<OtpScreen> {
@override
void dispose() {
_ticker?.cancel();
for (final c in _boxes) {
c.dispose();
}
for (final f in _focus) {
f.dispose();
}
_code.dispose();
_node.dispose();
super.dispose();
}
@@ -120,7 +126,7 @@ class _OtpScreenState extends State<OtpScreen> {
final app = AppScope.read(context);
final navigator = Navigator.of(context);
try {
await app.verifyOtp(widget.identifier, _code, name: widget.name);
await app.verifyOtp(widget.identifier, _digits, name: widget.name);
if (!mounted) return;
app.detectPickupLocation();
unawaited(HapticFeedback.mediumImpact());
@@ -131,27 +137,13 @@ class _OtpScreenState extends State<OtpScreen> {
} on ApiException catch (e) {
if (!mounted) return;
setState(() => _verifying = false);
for (final c in _boxes) {
c.clear();
}
_focus.first.requestFocus();
_code.clear();
_node.requestFocus();
DmToast.show(context, e.message);
}
}
/// Accepts a pasted code by spreading it across the boxes.
void _onChanged(int index, String value) {
if (value.length > 1) {
final digits = value.replaceAll(RegExp(r'\D'), '');
for (var i = 0; i < _boxes.length; i++) {
_boxes[i].text = i < digits.length ? digits[i] : '';
}
_focus[digits.length.clamp(0, _length - 1)].requestFocus();
} else if (value.isNotEmpty && index < 3) {
_focus[index + 1].requestFocus();
} else if (value.isEmpty && index > 0) {
_focus[index - 1].requestFocus();
}
void _onChanged(String _) {
setState(() {});
if (_complete && !_verifying) _verify();
}
@@ -221,18 +213,50 @@ class _OtpScreenState extends State<OtpScreen> {
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 360),
child: Row(
child: Stack(
children: [
for (var i = 0; i < _length; i++) ...[
if (i > 0) const SizedBox(width: 11),
Expanded(
child: _OtpBox(
controller: _boxes[i],
focusNode: _focus[i],
onChanged: (v) => _onChanged(i, v),
Row(
children: [
for (var i = 0; i < _length; i++) ...[
if (i > 0) const SizedBox(width: 11),
Expanded(
child: _OtpBox(
digit: i < _digits.length ? _digits[i] : '',
// The box the next digit will land in, which is the
// one a cursor would be sitting in. Focus is on the
// field underneath, not on any box.
active: _node.hasFocus && i == _digits.length,
),
),
],
],
),
// The real field, over the top and invisible. Over, so a tap
// anywhere on the row opens the keyboard; invisible, because
// the boxes are already drawing everything it holds.
Positioned.fill(
child: Opacity(
opacity: 0,
child: TextField(
controller: _code,
focusNode: _node,
onChanged: _onChanged,
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
autofillHints: const [AutofillHints.oneTimeCode],
enableInteractiveSelection: false,
showCursor: false,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
LengthLimitingTextInputFormatter(_length),
],
decoration: const InputDecoration(
counterText: '',
border: InputBorder.none,
),
),
),
],
),
],
),
),
@@ -273,57 +297,35 @@ class _OtpScreenState extends State<OtpScreen> {
}
}
/// One digit of the code.
/// One digit of the code — a drawing, not a field.
///
/// Was a filled `TextField` with no border, which read as a disabled field:
/// four grey slabs with nothing to say which one you were typing into. It is
/// the only thing on the screen, so it carries the state instead — empty is
/// outlined, focused takes the brand edge and lifts, filled tints. The
/// `TextField` inside is bare; the container owns every visual.
class _OtpBox extends StatefulWidget {
const _OtpBox({
required this.controller,
required this.focusNode,
required this.onChanged,
});
/// It used to be a real `TextField`, one of four, and the focus dance between
/// them is what dropped digits. It holds no controller and no focus node now:
/// [digit] is what to show and [active] is whether the next keystroke lands
/// here. Everything typed lives in the single field stacked over the row.
///
/// The states are unchanged — empty is outlined, active takes the brand edge
/// and lifts, filled tints — because it is still the only thing on the screen
/// and still has to carry them.
class _OtpBox extends StatelessWidget {
const _OtpBox({required this.digit, required this.active});
final TextEditingController controller;
final FocusNode focusNode;
final ValueChanged<String> onChanged;
@override
State<_OtpBox> createState() => _OtpBoxState();
}
class _OtpBoxState extends State<_OtpBox> {
@override
void initState() {
super.initState();
widget.focusNode.addListener(_onFocus);
}
@override
void dispose() {
widget.focusNode.removeListener(_onFocus);
super.dispose();
}
void _onFocus() => setState(() {});
final String digit;
final bool active;
@override
Widget build(BuildContext context) {
final focused = widget.focusNode.hasFocus;
final filled = widget.controller.text.isNotEmpty;
final filled = digit.isNotEmpty;
return AnimatedContainer(
duration: DmMotion.fast,
curve: DmMotion.ease,
height: 60,
decoration: BoxDecoration(
color: filled && !focused ? DmColors.brandSoft : DmColors.surface,
color: filled && !active ? DmColors.brandSoft : DmColors.surface,
borderRadius: DmRadius.all(DmRadius.md),
border: Border.all(
color: focused
color: active
? DmColors.brand
: filled
? DmColors.brandLine
@@ -331,7 +333,7 @@ class _OtpBoxState extends State<_OtpBox> {
),
// The focus ring, exactly as the fields draw it — this is the same
// control, one digit wide.
boxShadow: focused
boxShadow: active
? const [
BoxShadow(
color: DmColors.brandSoft,
@@ -341,29 +343,8 @@ class _OtpBoxState extends State<_OtpBox> {
]
: null,
),
child: Center(
child: TextField(
controller: widget.controller,
focusNode: widget.focusNode,
onChanged: widget.onChanged,
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
cursorColor: DmColors.brand,
cursorWidth: 2,
showCursor: true,
style: DmText.otp,
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
decoration: const InputDecoration(
counterText: '',
isDense: true,
filled: false,
contentPadding: EdgeInsets.zero,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
),
),
alignment: Alignment.center,
child: Text(digit, style: DmText.otp),
);
}
}

39
lib/ui/screens/auth/signup_screen.dart
View File

@@ -1,12 +1,10 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../../data/doormile_api.dart';
import '../../../state/app_scope.dart';
import '../../widgets/buttons.dart';
import '../../widgets/feedback.dart';
import '../../widgets/inputs.dart';
import '../../widgets/pieces.dart';
import 'auth_scaffold.dart';
import 'otp_screen.dart';
@@ -82,8 +80,11 @@ class _SignUpScreenState extends State<SignUpScreen> {
// sign up are one doorway with two doors, so they cannot be laid out
// differently — a customer who bounces between them should see the
// screen change its words, not its shape.
heroTitle: 'Create your account.',
heroSub: 'A few details and you can book your first pickup.',
// One line, no supporting sentence. "A few details and you can book
// your first pickup" described the three fields directly underneath it,
// on a screen whose whole content is those three fields.
heroTitle: 'Create your account',
badge: false,
// Pinned for the same reason as sign in: a three-field form plus the
// keyboard leaves no room, and the CTA must not be the thing that loses.
footer: Column(
@@ -106,17 +107,22 @@ class _SignUpScreenState extends State<SignUpScreen> {
],
),
children: [
// Floating labels, and no hints behind them: a caption above an empty
// field and an example inside it are two ways of asking the same
// question, and three of those stacked is six rows of chrome around
// three answers. The label sits where the answer will go and floats
// out once there is something to caption.
DmTextField(
label: 'Full name',
floating: true,
controller: _name,
hint: 'Joe Oommen',
keyboardType: TextInputType.name,
textInputAction: TextInputAction.next,
),
DmTextField(
label: 'Phone number',
floating: true,
controller: _phone,
hint: '98765 43210',
prefix: '+91',
keyboardType: TextInputType.phone,
digitsOnly: true,
@@ -125,21 +131,24 @@ class _SignUpScreenState extends State<SignUpScreen> {
),
DmTextField(
label: 'Email',
floating: true,
optional: true,
controller: _email,
hint: 'you@example.com',
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.done,
onSubmitted: (_) => _valid ? _continue() : null,
),
// The same reassurance sign in carries, in the same wash card, under
// the field it is about.
const DmInfoBanner(
icon: LucideIcons.shieldCheck,
title: 'We verify every number',
message: "A 4-digit code confirms it's you and keeps your parcels "
'secure.',
),
// ── The reassurance banner is gone ──
//
// "We verify every number · A 4-digit code confirms it's you and keeps
// your parcels secure." It was the last thing in a scrolling list
// under a pinned footer, so on a 720p phone the footer cut it in half
// and the customer read "…keeps your parcels secu". A reassurance that
// is clipped reassures nobody.
//
// It also answered a question nobody had yet: the customer finds out
// about the code on the next screen, which is called "Verify your
// number" and says so.
],
);
}