Thiru-tenext
86b6af48c2
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
560 lines
21 KiB
Dart
560 lines
21 KiB
Dart
import 'dart:math' as math;
|
|
|
|
import 'package:flutter/material.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 '../tokens.dart';
|
|
import 'shell_screen.dart';
|
|
import '../format.dart';
|
|
import '../widgets/cards.dart';
|
|
import '../widgets/book_orb.dart';
|
|
import '../widgets/misc.dart';
|
|
import 'booking/booking_routes.dart';
|
|
import 'booking/send_screen.dart';
|
|
import 'sheets/destination_sheet.dart';
|
|
import 'sheets/place_search_sheet.dart';
|
|
import 'sheets/window_sheet.dart';
|
|
import 'tracking_screen.dart';
|
|
|
|
/// Home — two questions, and nothing else on the screen.
|
|
///
|
|
/// *Can I book?* The sphere.
|
|
/// *Is anything happening?* One row, when there is.
|
|
///
|
|
/// ── What was removed ──
|
|
///
|
|
/// A two-line caption under the sphere that a returning customer had read a
|
|
/// hundred times; a four-cell card for the live booking carrying a status pill,
|
|
/// a reference, a route rail, a courier sentence, a window and a Track button —
|
|
/// six facts where the customer wanted two; and a three-row explainer with a
|
|
/// subtitle under every row.
|
|
///
|
|
/// The caption is first-run only now and one line. The live booking is one row.
|
|
/// The explainer lost its subtitles. Home went from roughly sixty words to
|
|
/// under twenty for a new customer, and to five for a returning one.
|
|
class HomeScreen extends StatefulWidget {
|
|
const HomeScreen({super.key});
|
|
|
|
@override
|
|
State<HomeScreen> createState() => _HomeScreenState();
|
|
}
|
|
|
|
class _HomeScreenState extends State<HomeScreen> {
|
|
/// True while the destination sheet is up.
|
|
///
|
|
/// Home does not just sit behind the scrim — it scales back a little and
|
|
/// fades, so the sheet reads as having been pushed up by the sphere rather
|
|
/// than as a new screen that arrived over the top of an unrelated one.
|
|
bool _handingOver = false;
|
|
|
|
/// BOOK. The one action on this screen, and the whole flow's front door.
|
|
///
|
|
/// Two questions are asked here, as sheets over Home, before any form:
|
|
///
|
|
/// where is it going? → when shall we collect? → the details
|
|
///
|
|
/// Both used to be answered somewhere else. The destination was a strip of
|
|
/// cards halfway down the form; the window was picked *for* the customer,
|
|
/// silently, the moment they chose a city — they arrived at a booking with a
|
|
/// time on it that they had never agreed to. A pickup window is a promise
|
|
/// about somebody's afternoon, and it is not ours to assume.
|
|
///
|
|
/// Dismissing the window sheet is allowed: the send screen carries "Choose a
|
|
/// window" in the footer and its button stays disabled until there is one.
|
|
Future<void> _book() async {
|
|
final app = AppScope.read(context);
|
|
final navigator = Navigator.of(context);
|
|
|
|
setState(() => _handingOver = true);
|
|
try {
|
|
final places = await showDestinationSheet(context);
|
|
if (places == null || places.isEmpty || !mounted) return;
|
|
|
|
app.startBooking();
|
|
app.setDestinations(places);
|
|
|
|
await showWindowSheet(context);
|
|
if (!mounted) return;
|
|
|
|
await navigator.push(
|
|
bookingRoute<void>(BookingRoutes.send, (_) => const SendScreen()),
|
|
);
|
|
} finally {
|
|
if (mounted) setState(() => _handingOver = false);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final app = AppScope.of(context);
|
|
final active = app.activeBookings.isEmpty ? null : app.activeBookings.first;
|
|
|
|
// 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);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: AnimatedScale(
|
|
scale: _handingOver ? 0.96 : 1,
|
|
duration: DmMotion.base,
|
|
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,
|
|
),
|
|
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),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
static String _firstName(String? name) {
|
|
final first = (name ?? '').trim().split(RegExp(r'\s+')).first;
|
|
return first.isEmpty ? 'there' : first;
|
|
}
|
|
}
|
|
|
|
/// The live booking, at the foot of Home.
|
|
///
|
|
/// ── 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;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final app = AppScope.read(context);
|
|
final slot = app.slotById(booking.slotId);
|
|
final miler = booking.miler ?? booking.deliveryAgent;
|
|
|
|
// 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}',
|
|
_ when booking.expectedDelivery != null =>
|
|
'Expected ${booking.expectedDelivery}',
|
|
_ => booking.stage.milestoneLabel,
|
|
};
|
|
|
|
return DmCard(
|
|
raised: true,
|
|
onTap: () {
|
|
app.openTracking(booking.reference);
|
|
Navigator.of(context).push(
|
|
bookingRoute<void>(
|
|
BookingRoutes.tracking,
|
|
(_) => const TrackingScreen(),
|
|
),
|
|
);
|
|
},
|
|
children: [
|
|
DmCardCell(
|
|
padding: const EdgeInsets.fromLTRB(18, 17, 18, 18),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
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,
|
|
),
|
|
),
|
|
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,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 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,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// The promise under the sphere: a glyph, a figure, a tint.
|
|
///
|
|
/// 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 label;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
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(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(icon, size: 13, color: DmColors.brand),
|
|
const SizedBox(width: 7),
|
|
Text(
|
|
label,
|
|
style: DmText.label.copyWith(fontSize: 12.5, color: DmColors.ink),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|