Doormile/doormile_customer_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign on the Stitch reference, in Plus Jakarta Sans

Browse Source 
Four passes, and the shape they landed on.

The type face is Plus Jakarta Sans (variable, wght 200-800), which brings a
fix with it: it carries the rupee glyph and Switzer does not, so prices stop
being set in Geist Mono to work around a missing character. Mono stays where
it is earned - references and phone numbers, read digit by digit.

Surfaces lift rather than outline. Cards carry two very soft shadow layers
instead of a hairline, because eight outlined boxes down a screen read as a
wireframe. The tab bar floats as a pill again for the same reason it was
right to: it is now the same kind of object as everything above it.

Screens:

* Home is the greeting, the address, the sphere and one card. The card lost
  its progress bar - a filling line says "wait", and a parcel two days into
  a journey is not something anyone is waiting through - and gained the size
  that buys.
* Orders cards are four bands: identity, destination, route, and whatever is
  happening right now. Plus a search field, because the list is the archive.
* Tracking leads with the state at display size, then TRIP MILESTONES with a
  step counter, then the courier.
* Review is a route thread over two particular cards.
* Account opens on the person: avatar, name, and two counted figures.

Three real bugs the redesign surfaced:

* Quick dispatch handed `loadCities()` straight to a FutureBuilder, so the
  catalogue was refetched on every rebuild and Home never settled.
* Order cards showed the whole visit's weight on one destination's row -
  somebody else's parcel. Per group now, and only once actually weighed.
* The pickup window was printed beside "In transit", where it reads as a
  delivery time nobody promised.

Nothing invented. The reference shows EXPRESS PRIORITY, CARBON OFFSET,
CONCIERGE ELITE and hub-to-hub routing; this backend sends none of them, so
they are absent rather than mocked up.

flutter analyze: clean. flutter test: 88 passing.

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-24 11:08:25 +05:30
parent 06fa6b797a
commit 86b6af48c2
73 changed files with 3398 additions and 1722 deletions
Download Patch File Download Diff File Expand all files Collapse all files

629
lib/ui/screens/home_screen.dart
View File

@@ -1,17 +1,19 @@
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import 'package:flutter_animate/flutter_animate.dart';
import '../../data/models.dart';
import '../../state/app_scope.dart';
import '../format.dart';
import '../tokens.dart';
import 'shell_screen.dart';
import '../format.dart';
import '../widgets/cards.dart';
import '../widgets/book_orb.dart';
import '../widgets/chrome.dart';
import '../widgets/misc.dart';
import 'booking/booking_routes.dart';
import 'booking/send_screen.dart';
import 'shell_screen.dart';
import 'sheets/destination_sheet.dart';
import 'sheets/place_search_sheet.dart';
import 'sheets/window_sheet.dart';
@@ -89,105 +91,179 @@ class _HomeScreenState extends State<HomeScreen> {
Widget build(BuildContext context) {
final app = AppScope.of(context);
final active = app.activeBookings.isEmpty ? null : app.activeBookings.first;
final firstRun = app.orders.isEmpty;
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
DmBrandHeader(
eyebrow: 'Welcome, ${_firstName(app.customer?.name)}',
title: firstRun ? 'Send your first parcel' : 'Send a parcel',
action: InkResponse(
onTap: () => ShellScreen.of(context)?.goToTab(2),
radius: 26,
child: DmAvatar(
initials: initialsOf(app.customer?.name),
onBrand: true,
// The sphere's own field, floored so a very short window leaves it a
// sphere rather than a slot. It is a *minimum*: the scroll view hands it
// whatever is left once the card below has taken what it needs.
final orbHeight = math.max(300.0, MediaQuery.sizeOf(context).height * 0.38);
return SafeArea(
bottom: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// No wordmark bar here.
//
// Orders and Account open on a title and want a bar over it. Home
// opens on the customer's own name with one object under it, and a
// second header above that made the screen start twice.
// ── Greeting, then where from ──
//
// "Hello, Joe ●" with the brand dot, the avatar opposite it, and the
// address as a bordered pill under both. With the wordmark bar gone
// this is the top of the screen, so it takes the inset the bar used
// to hold.
Padding(
padding: const EdgeInsets.fromLTRB(DmSpace.pad, 14, DmSpace.pad, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Row(
children: [
Flexible(
child: Text(
'Hello, ${_firstName(app.customer?.name)}',
style: DmText.headerTitle.copyWith(fontSize: 26),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(width: 8),
Container(
width: 6,
height: 6,
decoration: const BoxDecoration(
color: DmColors.brand,
shape: BoxShape.circle,
),
),
],
),
),
const SizedBox(width: 12),
InkResponse(
onTap: () => ShellScreen.of(context)?.goToTab(2),
radius: 26,
child: DmAvatar(
initials: initialsOf(app.customer?.name),
size: 40,
badge: active != null,
),
),
],
),
const SizedBox(height: 12),
_PickupLine(
title: app.pickup?.title ?? 'Set a pickup address',
onTap: () async {
final place = await showPlaceSearchSheet(context);
if (place != null && context.mounted) app.setPickup(place);
},
),
],
),
),
// The address is the one fact every booking starts from, so it sits
// in the header as a live value the customer can change in place —
// not as the first question of the flow.
child: DmHeaderTrack(
leading: const DmLiveDot(size: 6, color: Colors.white),
trailing: const Icon(
LucideIcons.chevronDown,
size: 16,
color: DmColors.onBrand3,
),
onTap: () async {
final place = await showPlaceSearchSheet(context);
if (place != null && context.mounted) app.setPickup(place);
},
child: Text(
app.pickup?.title ?? 'Set a pickup address',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: DmText.cardTitle.copyWith(color: Colors.white),
),
),
),
Expanded(
child: AnimatedScale(
scale: _handingOver ? 0.96 : 1,
duration: DmMotion.base,
curve: DmMotion.ease,
child: AnimatedOpacity(
opacity: _handingOver ? 0.45 : 1,
Expanded(
child: AnimatedScale(
scale: _handingOver ? 0.96 : 1,
duration: DmMotion.base,
curve: DmMotion.ease,
child: RefreshIndicator(
color: DmColors.brand,
backgroundColor: DmColors.surface,
onRefresh: () async {
await Future.wait([
app.detectPickupLocation(),
app.refreshOrders(),
]);
},
child: ListView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(
DmSpace.pad,
16,
DmSpace.pad,
28,
),
children: [
const SizedBox(height: 6),
DmBookOrb(
onTap: _book,
held: _handingOver,
// A returning customer knows what BOOK does. The line is
// for the first run only, and one line is enough to say
// what kind of app this is.
caption: firstRun
? 'A Miler collects from your door.'
: null,
).animate().fadeIn(duration: 420.ms).scale(
begin: const Offset(0.82, 0.82),
end: const Offset(1, 1),
duration: 620.ms,
// A shade of overshoot, so it arrives rather than
// appears.
curve: Curves.easeOutBack,
),
if (active != null)
Padding(
padding: const EdgeInsets.only(top: 22),
child: _LiveRow(booking: active),
).animate().fadeIn(duration: 380.ms, delay: 160.ms).slideY(
begin: 0.12,
curve: DmMotion.ease,
child: AnimatedOpacity(
opacity: _handingOver ? 0.45 : 1,
duration: DmMotion.base,
curve: DmMotion.ease,
child: RefreshIndicator(
color: DmColors.brand,
backgroundColor: DmColors.surface,
onRefresh: () async {
await Future.wait([
app.detectPickupLocation(),
app.refreshOrders(),
]);
},
child: LayoutBuilder(
builder: (context, box) => ListView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(
DmSpace.pad,
0,
DmSpace.pad,
0,
),
if (firstRun) const _HowItWorks(),
],
children: [
ConstrainedBox(
constraints: BoxConstraints(
minHeight: math.max(orbHeight, box.maxHeight),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DmBookOrb(onTap: _book, held: _handingOver)
.animate()
.fadeIn(duration: 420.ms)
.scale(
begin: const Offset(0.82, 0.82),
end: const Offset(1, 1),
duration: 620.ms,
curve: Curves.easeOutBack,
),
const SizedBox(height: 20),
// The promise, as a chip. It was a sentence under
// the sphere on first run and nothing afterwards;
// a returning customer is the one who most wants
// to know a Miler is three minutes away.
const _PromiseChip(
icon: LucideIcons.zap,
label: '3 min pickup',
).animate().fadeIn(
duration: 380.ms,
delay: 220.ms,
),
],
),
),
],
),
),
),
),
),
),
),
],
// ── The foot: what is running, and nothing else ──
//
// A "quick dispatch" row of shortcut cities lived here and was
// removed. It was a second way to start the one thing this screen
// starts, and it cost the sphere the space that makes it read as an
// object floating in a page rather than as a button in a stack.
//
// The card sits outside the scroll view, so the sphere is centred in
// what is actually left rather than in a viewport pretending the
// card is not there.
if (active != null)
Padding(
padding: const EdgeInsets.fromLTRB(
DmSpace.pad,
14,
DmSpace.pad,
6,
),
child: _LiveCard(booking: active),
)
.animate()
.fadeIn(duration: 380.ms, delay: 160.ms)
.slideY(begin: 0.12, curve: DmMotion.ease),
// Clears the floating tab bar, which the shell stacks over the body.
//
// Measured, not guessed. A fixed 74 was right on the 844pt golden
// and eight points short on a device with a home indicator, where
// the bar is its own 58 plus 10 of padding plus a 34pt inset — so
// the pill sat on top of the live card.
SizedBox(height: MediaQuery.paddingOf(context).bottom + 74),
],
),
);
}
@@ -197,14 +273,24 @@ class _HomeScreenState extends State<HomeScreen> {
}
}
/// The live booking, as one row.
/// The live booking, at the foot of Home.
///
/// This was a card with four cells. A customer glancing at Home wants two
/// things from it — *what is happening* and *how long* — and everything else it
/// carried was available one tap away on the screen this row opens. The route,
/// the reference and the package count all went back there.
class _LiveRow extends StatelessWidget {
const _LiveRow({required this.booking});
/// ── The loader went, and the card grew ──
///
/// It carried a thin filled line under the destination — a progress bar across
/// the five customer milestones. It was the one fact that cannot be written as
/// a word, and it still read as a *loader*: a bar that fills is the shape an
/// app uses to say "wait", and a parcel two days into a journey is not
/// something the customer is waiting through. The rail on tracking says the
/// same thing with five labelled nodes and no ambiguity.
///
/// What the space bought is size. This is the only thing on Home besides the
/// sphere and it was a 90pt strip — a chip, a place and a courier compressed
/// into three tight lines. The destination is set at display weight with its
/// promise under it now, a rule separates the journey from the person carrying
/// it, and the arrow is a target rather than a glyph.
class _LiveCard extends StatelessWidget {
const _LiveCard({required this.booking});
final Booking booking;
@@ -212,162 +298,259 @@ class _LiveRow extends StatelessWidget {
Widget build(BuildContext context) {
final app = AppScope.read(context);
final slot = app.slotById(booking.slotId);
final miler = booking.miler ?? booking.deliveryAgent;
// One supporting line, chosen by what the customer can act on right now:
// before the handover that is when the Miler is coming, after it that is
// where the parcel is going.
final support = switch (booking.stage) {
// The district alone. "Chennai, Tamil Nadu" shares its row with the state
// and the reference, and on a 402pt device it rendered "Chenna…" — the
// half of the name that identifies nothing.
final place = booking.isMultiDestination
? '${booking.destinations.length} destinations'
: booking.destination.shortLabel;
// The promise, in the order a customer can act on it: how long, then
// where they are, then what was agreed.
final promise = switch (booking.stage) {
JourneyStage.arrived => 'At your door now',
_ when booking.milerEtaMinutes != null && booking.milerEtaMinutes! > 0 =>
'Arriving in about ${booking.milerEtaMinutes} min',
JourneyStage.booked || JourneyStage.assigned || JourneyStage.onTheWay
when slot != null =>
'${slot.day} · ${slot.window}',
JourneyStage.arrived => 'At your door now',
_ =>
booking.isMultiDestination
? 'To ${booking.destinations.length} destinations'
: 'To ${booking.destination.label}',
_ when booking.expectedDelivery != null =>
'Expected ${booking.expectedDelivery}',
_ => booking.stage.milestoneLabel,
};
return Semantics(
button: true,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
app.openTracking(booking.reference);
Navigator.of(context).push(
bookingRoute<void>(
BookingRoutes.tracking,
(_) => const TrackingScreen(),
),
);
},
child: Container(
constraints: const BoxConstraints(minHeight: 64),
padding: const EdgeInsets.fromLTRB(16, 14, 12, 14),
decoration: BoxDecoration(
color: DmColors.brandSoft,
borderRadius: DmRadius.all(DmRadius.md),
border: Border.all(color: DmColors.brandLine),
return DmCard(
raised: true,
onTap: () {
app.openTracking(booking.reference);
Navigator.of(context).push(
bookingRoute<void>(
BookingRoutes.tracking,
(_) => const TrackingScreen(),
),
child: Row(
);
},
children: [
DmCardCell(
padding: const EdgeInsets.fromLTRB(18, 17, 18, 18),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
const DmLiveDot(size: 7),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
booking.stage.milestoneLabel,
style: DmText.cardTitle.copyWith(
color: DmColors.brandPress,
Row(
children: [
const DmLiveDot(size: 7),
const SizedBox(width: 9),
Flexible(
child: Text(
booking.stage.chipLabel.toUpperCase(),
style: DmText.eyebrow.copyWith(
fontSize: 10,
letterSpacing: 0.9,
color: DmColors.brand,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
Text(
support,
style: DmText.small,
),
const SizedBox(width: 10),
Flexible(
child: Text(
booking.displayId,
style: DmText.monoSm.copyWith(color: DmColors.ink3),
textAlign: TextAlign.right,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 14),
Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
place,
style: DmText.headerTitle.copyWith(fontSize: 26),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 3),
Text(
promise,
style: DmText.body.copyWith(
fontSize: 14.5,
color: DmColors.ink3,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
const SizedBox(width: 12),
// A disc, not a bare chevron. It is the only affordance on
// the card and it sits against 26pt of type, where a 17pt
// glyph on its own disappears.
Container(
width: 44,
height: 44,
alignment: Alignment.center,
decoration: const BoxDecoration(
color: DmColors.brandSoft,
shape: BoxShape.circle,
),
child: const Icon(
LucideIcons.arrowRight,
size: 19,
color: DmColors.brand,
),
),
],
),
if (miler != null) ...[
const SizedBox(height: 16),
const Divider(
height: 1,
thickness: 1,
color: DmColors.hairline,
),
const SizedBox(height: 14),
Row(
children: [
DmAvatar(initials: miler.initials, size: 38),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
miler.name,
style: DmText.cardTitle.copyWith(fontSize: 14.5),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
Text(
miler.vehicle,
style: DmText.monoSm.copyWith(color: DmColors.ink3),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
const SizedBox(width: 8),
const Icon(
LucideIcons.chevronRight,
size: 18,
color: DmColors.brand,
),
],
],
),
),
],
);
}
}
/// Where the Miler is coming to, under the greeting.
///
/// ── Box → line → pill → line → row → pill ──
///
/// It has been most shapes. The one it has landed on is the reference's: a
/// small bordered pill holding a brand pin, the address, and a chevron-down.
///
/// The pill is right *here* and was wrong before because the screen changed
/// around it. On a page whose only other objects were a name and a sphere it
/// was a container built to hold one line of text. On a page that now opens
/// with a wordmark bar and ends with a floating one, it is the middle term —
/// and the chevron-down is the honest glyph, because what it opens is a
/// chooser, not another screen.
class _PickupLine extends StatelessWidget {
const _PickupLine({required this.title, required this.onTap});
final String title;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return Semantics(
button: true,
label: 'Pickup from $title. Change',
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
constraints: const BoxConstraints(minHeight: 40, maxWidth: 300),
padding: const EdgeInsets.fromLTRB(11, 8, 11, 8),
decoration: BoxDecoration(
color: DmColors.surface,
borderRadius: DmRadius.all(DmRadius.pill),
border: Border.all(color: DmColors.border),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(LucideIcons.mapPin, size: 15, color: DmColors.brand),
const SizedBox(width: 8),
Flexible(
child: Text(
title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: DmText.cardTitle.copyWith(fontSize: 14),
),
),
const SizedBox(width: 6),
const Icon(
LucideIcons.chevronDown,
size: 15,
color: DmColors.ink4,
),
],
),
),
),
),
);
}
}
/// How it works, on first run only.
/// The promise under the sphere: a glyph, a figure, a tint.
///
/// This was a bordered card holding three numbered rows, each with a subtitle.
/// It is a timeline now — glyph, hairline, title — and the subtitles are gone:
/// they described the step the title had already named, on the one screen where
/// a new customer is least willing to read.
class _HowItWorks extends StatelessWidget {
const _HowItWorks();
static const _steps = [
(LucideIcons.mapPin, 'Tell us where it goes'),
(LucideIcons.clock3, 'Pick a two-hour window'),
(LucideIcons.packageCheck, 'Hand it over and track'),
];
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 30),
for (var i = 0; i < _steps.length; i++)
_Step(
icon: _steps[i].$1,
title: _steps[i].$2,
last: i == _steps.length - 1,
),
],
).animate(delay: 320.ms).fadeIn(duration: 520.ms).slideY(
begin: 0.06,
curve: DmMotion.ease,
);
}
}
class _Step extends StatelessWidget {
const _Step({required this.icon, required this.title, required this.last});
/// It was a full sentence — "A Miler collects from your door." — shown on the
/// first run only. That is the app explaining itself to somebody who has
/// already pressed nothing; what a customer actually wants before they commit
/// is how long they will wait, and that is worth saying every time.
class _PromiseChip extends StatelessWidget {
const _PromiseChip({required this.icon, required this.label});
final IconData icon;
final String title;
final bool last;
final String label;
@override
Widget build(BuildContext context) {
return IntrinsicHeight(
return Container(
padding: const EdgeInsets.fromLTRB(11, 7, 13, 8),
decoration: BoxDecoration(
color: DmColors.surface,
borderRadius: DmRadius.all(DmRadius.pill),
boxShadow: DmShadow.card,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
// The rail: a washed disc per step, joined by a hairline that runs
// the height of that step's text. Sized by [IntrinsicHeight] so the
// connector always meets the next disc, whatever the text wraps to.
SizedBox(
width: 34,
child: Column(
children: [
Container(
width: 34,
height: 34,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: DmColors.brandSoft,
),
child: Icon(icon, size: 15, color: DmColors.brand),
),
if (!last)
const Expanded(
child: SizedBox(
width: 1,
child: ColoredBox(color: DmColors.border),
),
),
],
),
),
const SizedBox(width: 14),
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 8, bottom: last ? 0 : 20),
child: Text(title, style: DmText.cardTitle),
),
Icon(icon, size: 13, color: DmColors.brand),
const SizedBox(width: 7),
Text(
label,
style: DmText.label.copyWith(fontSize: 12.5, color: DmColors.ink),
),
],
),