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

183
lib/ui/widgets/chrome.dart
View File

@@ -3,12 +3,26 @@ import 'package:flutter/services.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../tokens.dart';
import 'buttons.dart';
/// Top bar for pushed screens: a square back affordance, a quiet title, an
/// optional trailing slot (usually the booking reference in mono), and the
/// booking step indicator.
class DmTopBar extends StatelessWidget implements PreferredSizeWidget {
///
/// ── It knows whether anything is under it ──
///
/// The bar used to be a flat slab of canvas, the same colour as the page, with
/// no line under it. Content scrolled beneath it and simply disappeared — an
/// address row would slide up and vanish behind a back arrow with nothing to
/// say it had gone anywhere. A bar that never changes is not a layer; it is
/// paint.
///
/// It listens to the [ScrollNotificationObserver] that [Scaffold] installs
/// around its body — the same mechanism Material's own `AppBar` uses for
/// `scrolledUnderElevation` — and the moment a list has scrolled under it, the
/// canvas turns to surface and a hairline fades in along the bottom. At the top
/// of a page it is invisible again. Nothing is announced, nothing moves; the
/// screen just stops looking like one plane.
class DmTopBar extends StatefulWidget implements PreferredSizeWidget {
const DmTopBar({
super.key,
this.title,
@@ -38,17 +52,67 @@ class DmTopBar extends StatelessWidget implements PreferredSizeWidget {
final VoidCallback? onBack;
final Color background;
/// The +1 is the hairline. A transparent [BorderSide] still measures 1pt, so
/// the bar is the same height scrolled or not — but it is a point taller than
/// the row inside it, and without this the Column overflows by exactly that
/// on every screen with a top bar.
@override
Size get preferredSize => Size.fromHeight(56 + (progress == null ? 0 : 42));
Size get preferredSize => Size.fromHeight(57 + (progress == null ? 0 : 42));
@override
State<DmTopBar> createState() => _DmTopBarState();
}
class _DmTopBarState extends State<DmTopBar> {
ScrollNotificationObserverState? _observer;
bool _under = false;
@override
void didChangeDependencies() {
super.didChangeDependencies();
_observer?.removeListener(_onScroll);
_observer = ScrollNotificationObserver.maybeOf(context);
_observer?.addListener(_onScroll);
}
@override
void dispose() {
_observer?.removeListener(_onScroll);
_observer = null;
super.dispose();
}
void _onScroll(ScrollNotification notification) {
// The predicate is what keeps a horizontal strip inside the page — or a
// list inside a sheet over it — from driving the bar behind them.
if (!defaultScrollNotificationPredicate(notification)) return;
if (notification is! ScrollUpdateNotification &&
notification is! ScrollMetricsNotification) {
return;
}
// A few points of slack: a list that rests one pixel off the top, or a
// bounce at the end of an overscroll, should not flicker the line on.
final under = notification.metrics.extentBefore > 4;
if (under != _under && mounted) setState(() => _under = under);
}
@override
Widget build(BuildContext context) {
final current = progress == null || steps == null
final current = widget.progress == null || widget.steps == null
? 0
: (progress! * steps!).round().clamp(0, steps!);
: (widget.progress! * widget.steps!).round().clamp(0, widget.steps!);
return Material(
color: background,
return AnimatedContainer(
duration: DmMotion.base,
curve: DmMotion.ease,
decoration: BoxDecoration(
color: _under ? DmColors.surface : widget.background,
border: Border(
bottom: BorderSide(
color: _under ? DmColors.border : Colors.transparent,
),
),
),
child: SafeArea(
bottom: false,
child: Column(
@@ -58,39 +122,37 @@ class DmTopBar extends StatelessWidget implements PreferredSizeWidget {
height: 56,
child: Row(
children: [
const SizedBox(width: DmSpace.pad - 12),
DmIconButton(
icon: LucideIcons.arrowLeft,
tooltip: 'Back',
onPressed: onBack ?? () => Navigator.of(context).maybePop(),
),
const SizedBox(width: 6),
const SizedBox(width: DmSpace.pad - 14),
DmBackButton(onPressed: widget.onBack),
const SizedBox(width: 4),
Expanded(
child: title == null
child: widget.title == null
? const SizedBox.shrink()
: Text(
title!,
style: DmText.cardTitle.copyWith(
fontSize: 15.5,
letterSpacing: -0.31,
),
widget.title!,
style: DmText.heading.copyWith(fontSize: 17),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
?trailing,
?widget.trailing,
const SizedBox(width: DmSpace.pad),
],
),
),
if (progress != null)
if (widget.progress != null)
Padding(
padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 16),
padding: const EdgeInsets.fromLTRB(
DmSpace.pad,
0,
DmSpace.pad,
16,
),
child: DmStepBar(
progress: progress!,
steps: steps,
progress: widget.progress!,
steps: widget.steps,
current: current,
label: stepLabel,
label: widget.stepLabel,
),
),
],
@@ -100,6 +162,49 @@ class DmTopBar extends StatelessWidget implements PreferredSizeWidget {
}
}
/// Back.
///
/// ── Why it lost its box ──
///
/// It was a 40pt white square with a hairline border and a 12pt corner, which
/// on a canvas of white bordered cards read as *a card containing an arrow*
/// rather than as a way out of the screen. On the send screen, where the title
/// is now the route underneath it, that left a small empty card alone in the
/// top-left corner of an otherwise open page.
///
/// A back affordance is the one control in an app that needs no explaining and
/// no container. It is the glyph, a 48pt target around it, and a circular
/// ripple in the brand wash when it is pressed.
class DmBackButton extends StatelessWidget {
const DmBackButton({super.key, this.onPressed});
final VoidCallback? onPressed;
@override
Widget build(BuildContext context) {
return Semantics(
button: true,
label: 'Back',
child: SizedBox(
width: DmSpace.tap,
height: DmSpace.tap,
child: InkResponse(
onTap: onPressed ?? () => Navigator.of(context).maybePop(),
radius: 24,
highlightShape: BoxShape.circle,
splashColor: DmColors.brandSoft,
highlightColor: DmColors.brandSoft,
child: const Icon(
LucideIcons.arrowLeft,
size: 22,
color: DmColors.ink,
),
),
),
);
}
}
/// Booking progress.
///
/// With [steps] it draws that many segments, captioned "Step n of m" in mono;
@@ -113,6 +218,7 @@ class DmStepBar extends StatelessWidget {
this.current = 0,
this.label,
this.onFill = false,
this.caption = true,
});
final double progress;
@@ -124,6 +230,14 @@ class DmStepBar extends StatelessWidget {
/// lightened white and the fill is solid white.
final bool onFill;
/// Whether to print "Step n of m" above the segments.
///
/// True inside the booking flow, where the customer is answering questions
/// and "how many left" is the thing they want. False on tracking, where the
/// same segments describe a journey nobody is working through — there,
/// counting the stages turns a parcel into a progress bar with homework.
final bool caption;
@override
Widget build(BuildContext context) {
final track = onFill ? const Color(0x52FFFFFF) : DmColors.border;
@@ -171,7 +285,7 @@ class DmStepBar extends StatelessWidget {
],
);
if (label == null && steps == null) return bar;
if (!caption || (label == null && steps == null)) return bar;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -311,8 +425,19 @@ class DmBrandHeader extends StatelessWidget {
borderRadius: const BorderRadius.vertical(
bottom: Radius.circular(DmRadius.header),
),
child: ColoredBox(
color: DmColors.brand,
child: DecoratedBox(
// Lit from the top-left like every other brand object in the app, so
// the crimson field has a direction instead of sitting flat. The spread
// is deliberately narrow — a header that reads as a gradient rather
// than as a colour has stopped being the brand.
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFFA0150A), DmColors.brand, Color(0xFF7A0C04)],
stops: [0.0, 0.52, 1.0],
),
),
child: CustomPaint(
painter: const DmArcField(),
child: SafeArea(