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

163
lib/ui/widgets/inputs.dart
View File

@@ -32,6 +32,7 @@ class DmTextField extends StatefulWidget {
this.digitsOnly = false,
this.mono = false,
this.onClear,
this.floating = false,
});
/// The caption above the field, or null for a field that stands alone.
@@ -59,6 +60,16 @@ class DmTextField extends StatefulWidget {
/// Shows a clear button on the right when non-null.
final VoidCallback? onClear;
/// Puts [label] inside the field while it is empty, and floats it above once
/// there is something to caption.
///
/// An empty field under its own caption is two rows to ask one question, and
/// on a screen with two of them that is four rows of chrome around two
/// slabs of white. Floating, the question sits where the answer will go — so
/// the field is never blank and the caption only appears when it has a job,
/// which is reminding the customer what they already typed.
final bool floating;
@override
State<DmTextField> createState() => _DmTextFieldState();
}
@@ -70,10 +81,16 @@ class _DmTextFieldState extends State<DmTextField> {
void initState() {
super.initState();
_node.addListener(() => setState(() {}));
if (widget.floating) {
widget.controller.addListener(_onText);
}
}
void _onText() => setState(() {});
@override
void dispose() {
if (widget.floating) widget.controller.removeListener(_onText);
_node.dispose();
super.dispose();
}
@@ -81,6 +98,12 @@ class _DmTextFieldState extends State<DmTextField> {
@override
Widget build(BuildContext context) {
final focused = _node.hasFocus;
// A floating label is above the field only once it has a reason to be:
// something typed, or a cursor in it.
final lifted = !widget.floating ||
focused ||
widget.controller.text.isNotEmpty;
final textStyle = widget.mono
? DmText.monoLg.copyWith(fontSize: 15.5, color: DmColors.ink)
: DmText.field;
@@ -90,25 +113,33 @@ class _DmTextFieldState extends State<DmTextField> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (widget.label != null) ...[
Text.rich(
TextSpan(
style: DmText.label,
children: [
TextSpan(text: widget.label),
if (widget.optional)
const TextSpan(
text: ' Optional',
style: TextStyle(
color: DmColors.ink4,
fontWeight: FontWeight.w500,
if (widget.label != null)
AnimatedSize(
duration: DmMotion.fast,
curve: DmMotion.ease,
alignment: Alignment.bottomLeft,
child: !lifted
? const SizedBox(width: double.infinity)
: Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Text.rich(
TextSpan(
style: DmText.label,
children: [
TextSpan(text: widget.label),
if (widget.optional)
const TextSpan(
text: ' Optional',
style: TextStyle(
color: DmColors.ink4,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
],
),
),
const SizedBox(height: 8),
],
AnimatedContainer(
duration: DmMotion.fast,
curve: DmMotion.ease,
@@ -172,7 +203,12 @@ class _DmTextFieldState extends State<DmTextField> {
],
decoration: InputDecoration(
isDense: true,
hintText: widget.hint,
// While the label is down inside the field it IS the
// placeholder; [hint] only gets the slot once the label
// has floated out of it.
hintText: lifted
? widget.hint
: (widget.label ?? widget.hint),
hintStyle: DmText.field.copyWith(
color: DmColors.ink3,
fontWeight: FontWeight.w500,
@@ -231,8 +267,14 @@ class DmRow extends StatelessWidget {
final VoidCallback? onTap;
final bool showChevron;
/// The glyph in the row's leading tile. Account's rows all carry one, so the
/// list can be scanned by shape before it is read.
/// The row's leading glyph. Account's rows all carry one, so the list can be
/// scanned by shape before it is read.
///
/// It used to sit in a washed crimson tile. Four of those down a settings
/// list put four brand-coloured blocks on the quietest screen in the app,
/// and each one cost 56pt of the width the row's value needed — which is why
/// "38 Mettupalayam Road" rendered as "38 Mettupal…". The glyph alone scans
/// just as well.
final IconData? icon;
@override
@@ -249,15 +291,16 @@ class DmRow extends StatelessWidget {
child: Row(
children: [
if (icon != null) ...[
DmTile(icon: icon, tone: DmTileTone.wash),
const SizedBox(width: 12),
Icon(icon, size: 19, color: DmColors.ink3),
const SizedBox(width: 14),
],
// The label is what the row IS, so it never wraps and never
// gives up width; the value is context and ellipsizes. A saved
// address as a value would otherwise push "Saved addresses" onto
// two lines.
Expanded(
flex: 3,
// The label takes the width it needs and the value takes what
// is left. A fixed 3:2 split gave the label room it was not
// using — "Saved addresses" is short — and rendered the value
// beside it as "38 Mettupal…", which is a truncation nobody can
// read anything out of. The label stays Flexible so a long one
// at large text sizes can still give way.
Flexible(
child: Text(
label,
style: DmText.cardTitle,
@@ -266,9 +309,8 @@ class DmRow extends StatelessWidget {
),
),
if (value != null) ...[
const SizedBox(width: 10),
Flexible(
flex: 2,
const SizedBox(width: 12),
Expanded(
child: Text(
value!,
style: DmText.value,
@@ -328,3 +370,64 @@ class DmSwitch extends StatelessWidget {
);
}
}
/// The search field used by every picker sheet.
///
/// It was written inline inside the pickup sheet and then wanted again by the
/// destination sheet, which is the moment a style becomes a component. Filled
/// white on the canvas rather than outlined: a search field that is the only
/// control above a list does not need an edge to be found, and the fill is what
/// makes it read as a place to type rather than as the first row of the list.
class DmSearchField extends StatelessWidget {
const DmSearchField({
super.key,
required this.controller,
required this.hint,
this.onChanged,
this.autofocus = false,
});
final TextEditingController controller;
final String hint;
final ValueChanged<String>? onChanged;
final bool autofocus;
@override
Widget build(BuildContext context) {
return TextField(
controller: controller,
onChanged: onChanged,
autofocus: autofocus,
cursorColor: DmColors.brand,
style: DmText.field,
textInputAction: TextInputAction.search,
decoration: InputDecoration(
hintText: hint,
hintStyle: DmText.field.copyWith(
color: DmColors.ink3,
fontWeight: FontWeight.w500,
),
prefixIcon: const Icon(
LucideIcons.search,
size: 20,
color: DmColors.ink3,
),
filled: true,
fillColor: DmColors.surface,
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 14,
),
border: _border(DmColors.border, 1),
enabledBorder: _border(DmColors.border, 1),
focusedBorder: _border(DmColors.brand, 1.5),
),
);
}
static OutlineInputBorder _border(Color color, double width) =>
OutlineInputBorder(
borderRadius: DmRadius.all(DmRadius.sm),
borderSide: BorderSide(color: color, width: width),
);
}