Thiru-tenext
8956e818a4
Two ways to book the same parcel, and the difference said where the choice is made rather than in a paragraph about it. ONE TOUCH is the sphere: a state, a district, a window, and nothing else. The door, the recipient and the weight go out omitted, which the contract already treats as "not added yet" - the Miler writes them down standing at the address with the parcel in hand, which is the only moment anybody knows them. The pick/drop form under it is the other way in. PICKUP already carries the detected address; DROP is the only row with a question on it, and it asks for the full door - once per destination - before the window. Captions rather than an explainer: "Just a city and a time" under the sphere, "Enter the full address yourself" on the row. The pickup screen is a map screen now instead of a screen with a map on it. Full-bleed basemap, pin nailed to the centre, floating search and back, and a fixed sheet carrying what the pin resolved to. The collect-from sheet can hand off to it and carry the pin back. Also: * Home reads what-is-running, then the one gesture, then the form. The live card lost its courier row and half its height. * The sphere turns inside out on press - white floods from the centre and the word inverts through the clip, not by tween - and bounces back on release. * Order IDs copy, on Orders and on tracking. * Tracking says PICKUP and DROP with an arrow between them, carries the reference at the foot of the card it identifies, and shows every timing exactly once. * The wordmark bar is gone from all three roots; Orders and Account had no SafeArea under it, so their titles were sitting under the notch. flutter analyze: clean. flutter test: 90 passing. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EqVJPB9B4QuieZnBAAKgYQ
638 lines
24 KiB
Dart
638 lines
24 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/drop_address_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.
|
|
///
|
|
/// ── Where, then when, then the review ──
|
|
///
|
|
/// Two sheets in sequence: states → districts, then the pickup window. The
|
|
/// second rises while the first is still falling, so the handover reads as
|
|
/// one surface changing its question rather than as a sheet failing and
|
|
/// another arriving.
|
|
///
|
|
/// Dismissing the window sheet is allowed. The review screen carries the
|
|
/// window as its own row — brand-coloured while it is unanswered — and the
|
|
/// button stays disabled until there is one, so backing out of the second
|
|
/// sheet costs a tap rather than the booking.
|
|
Future<void> _book({bool detailed = false}) 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(detailed: detailed);
|
|
app.setDestinations(places);
|
|
|
|
// The full form asks for the door before it asks for the window, and it
|
|
// asks once per destination: a visit that fans out to three places is
|
|
// three addresses, and "for all parcels" is the whole point of choosing
|
|
// this path over One Touch.
|
|
if (detailed) {
|
|
for (final group in app.draftDestinations) {
|
|
if (!mounted) return;
|
|
final saved = await showDropAddressSheet(
|
|
context,
|
|
details: group.details,
|
|
district: group.destination.shortLabel,
|
|
);
|
|
if (saved != true) break;
|
|
}
|
|
}
|
|
if (!mounted) return;
|
|
|
|
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.
|
|
// Lower than it was. The sphere gained a second control under it and the
|
|
// live card was sitting a third of a screen below both; the field only has
|
|
// to be big enough for the sphere to float in, not to push everything else
|
|
// off the fold.
|
|
final orbHeight = math.max(260.0, MediaQuery.sizeOf(context).height * 0.30);
|
|
|
|
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, 26, 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,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// ── What is running comes first ──
|
|
//
|
|
// The live card sat under the sphere, at the foot of the screen. A
|
|
// customer with a parcel in the network opens this app to check on
|
|
// it, not to send another one — so it is the first thing under their
|
|
// own name, and the sphere is what they scroll past it to.
|
|
if (active != null)
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(
|
|
DmSpace.pad,
|
|
14,
|
|
DmSpace.pad,
|
|
0,
|
|
),
|
|
child: _LiveCard(booking: active),
|
|
)
|
|
.animate()
|
|
.fadeIn(duration: 380.ms, delay: 160.ms)
|
|
.slideY(begin: -0.08, curve: DmMotion.ease),
|
|
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: [
|
|
// ── What each way asks for ──
|
|
//
|
|
// Two ways to book the same parcel is not
|
|
// something a customer can infer from a sphere
|
|
// and a form. One line each, in place: this one
|
|
// under the sphere, the other on the DROP row.
|
|
// Said side by side in a paragraph they would be
|
|
// a comparison nobody reads; said where the
|
|
// choice is made they are two captions.
|
|
DmBookOrb(
|
|
onTap: _book,
|
|
held: _handingOver,
|
|
// Short enough to sit on one line, and
|
|
// written to be read against the DROP
|
|
// row's note rather than on its own:
|
|
//
|
|
// Just a city and a time
|
|
// Enter the full address yourself
|
|
//
|
|
// Two captions, same length, opposite
|
|
// answers. A paragraph comparing them
|
|
// would say more and be read by nobody.
|
|
caption: 'Just a city and a time',
|
|
)
|
|
.animate()
|
|
.fadeIn(duration: 420.ms)
|
|
.scale(
|
|
begin: const Offset(0.82, 0.82),
|
|
end: const Offset(1, 1),
|
|
duration: 620.ms,
|
|
curve: Curves.easeOutBack,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// ── Everything under the sphere is pinned ──
|
|
//
|
|
// The scroll view centres the sphere in whatever height is left, and
|
|
// it cannot know about anything laid out after it — so anything laid
|
|
// out inside that column pushed the thing before it under the fold.
|
|
// The form sits outside it, and the sphere floats in what remains.
|
|
//
|
|
// A "3 min pickup" chip used to sit here. It was riding the sphere's
|
|
// lower arc — the field is centred on the disc, not on the glow
|
|
// round it, so a chip pinned directly under the column overlapped
|
|
// the shadow the sphere throws.
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(DmSpace.pad, 0, DmSpace.pad, 0),
|
|
child: _PickDropForm(
|
|
pickup: app.pickup?.title,
|
|
onPickup: () async {
|
|
final place = await showPlaceSearchSheet(context);
|
|
if (place != null && context.mounted) app.setPickup(place);
|
|
},
|
|
onDrop: () => _book(detailed: true),
|
|
).animate().fadeIn(duration: 380.ms, delay: 300.ms),
|
|
),
|
|
|
|
// 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 head of Home.
|
|
///
|
|
/// ── Smaller, and without the courier ──
|
|
///
|
|
/// It carried a rule and a second row naming the Miler and their plate. Both
|
|
/// are real and neither belongs here: this card sits above the sphere now, so
|
|
/// every point it takes is a point the one action on the screen gives up — and
|
|
/// the Miler's name is on the screen this card opens, beside the button that
|
|
/// rings them, which is where it is any use.
|
|
///
|
|
/// What is left is what a glance asks: what is happening, where, and when.
|
|
/// Three lines and an arrow.
|
|
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);
|
|
|
|
// 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(16, 13, 14, 14),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
const DmLiveDot(size: 6),
|
|
const SizedBox(width: 8),
|
|
Flexible(
|
|
child: Text(
|
|
booking.stage.chipLabel.toUpperCase(),
|
|
style: DmText.eyebrow.copyWith(
|
|
fontSize: 9.5,
|
|
letterSpacing: 0.9,
|
|
color: DmColors.brand,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Flexible(
|
|
child: Text(
|
|
booking.displayId,
|
|
style: DmText.monoSm.copyWith(
|
|
fontSize: 11,
|
|
color: DmColors.ink3,
|
|
),
|
|
textAlign: TextAlign.right,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 9),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
place,
|
|
style: DmText.headerTitle.copyWith(fontSize: 21),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
Text(
|
|
promise,
|
|
style: DmText.small.copyWith(
|
|
fontSize: 13,
|
|
color: DmColors.ink3,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Container(
|
|
width: 36,
|
|
height: 36,
|
|
alignment: Alignment.center,
|
|
decoration: const BoxDecoration(
|
|
color: DmColors.brandSoft,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: const Icon(
|
|
LucideIcons.arrowRight,
|
|
size: 17,
|
|
color: DmColors.brand,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Pickup over drop, on one card — the shape every ride app asks a journey in.
|
|
///
|
|
/// ── Why the app has two ways to start and only one of them is a sphere ──
|
|
///
|
|
/// One Touch is the product: a state, a district, a window, and the Miler
|
|
/// writes down the door when they get there. It is a sphere because it is one
|
|
/// gesture, and a gesture cannot be a form.
|
|
///
|
|
/// This is the same booking for a customer who already knows the door. Both
|
|
/// ends are here because a journey has two, and seeing them together is what
|
|
/// makes it obvious that one is already answered — the pickup carries the
|
|
/// address the app detected, so the only row with a question on it is the
|
|
/// drop.
|
|
///
|
|
/// It replaced a line of text reading "Enter the full address instead", which
|
|
/// said what would happen and showed none of it. A form that is already half
|
|
/// filled in is a better argument for itself than a sentence about forms.
|
|
class _PickDropForm extends StatelessWidget {
|
|
const _PickDropForm({
|
|
required this.pickup,
|
|
required this.onPickup,
|
|
required this.onDrop,
|
|
});
|
|
|
|
final String? pickup;
|
|
final VoidCallback onPickup;
|
|
final VoidCallback onDrop;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return DmCard(
|
|
children: [
|
|
DmCardCell(
|
|
padding: const EdgeInsets.fromLTRB(16, 6, 14, 6),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
_End(
|
|
label: 'PICKUP',
|
|
value: pickup ?? 'Set a pickup address',
|
|
unset: pickup == null,
|
|
origin: true,
|
|
last: false,
|
|
onTap: onPickup,
|
|
),
|
|
_End(
|
|
label: 'DROP',
|
|
value: 'Where is it going?',
|
|
note: 'Enter the full address yourself',
|
|
unset: true,
|
|
origin: false,
|
|
last: true,
|
|
onTap: onDrop,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
/// One end of the journey: a node on a thread, a micro-label, and the answer
|
|
/// or the question.
|
|
class _End extends StatelessWidget {
|
|
const _End({
|
|
required this.label,
|
|
required this.value,
|
|
required this.unset,
|
|
required this.origin,
|
|
required this.last,
|
|
required this.onTap,
|
|
this.note,
|
|
});
|
|
|
|
final String label;
|
|
final String value;
|
|
|
|
/// What choosing this row means. Only the drop carries one — the pickup is
|
|
/// already answered, and a caption under an answer is noise.
|
|
final String? note;
|
|
final bool unset;
|
|
final bool origin;
|
|
final bool last;
|
|
final VoidCallback onTap;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Semantics(
|
|
button: true,
|
|
label: '$label $value',
|
|
child: GestureDetector(
|
|
behavior: HitTestBehavior.opaque,
|
|
onTap: onTap,
|
|
child: IntrinsicHeight(
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
// The node and the thread it hangs from. The thread belongs to
|
|
// the stop above the join, so the last one ends clean.
|
|
SizedBox(
|
|
width: 20,
|
|
child: Column(
|
|
children: [
|
|
const SizedBox(height: 17),
|
|
Container(
|
|
width: 9,
|
|
height: 9,
|
|
decoration: BoxDecoration(
|
|
color: unset && !origin
|
|
? Colors.transparent
|
|
: (origin ? DmColors.ink : DmColors.brand),
|
|
shape: BoxShape.circle,
|
|
border: unset && !origin
|
|
? Border.all(color: DmColors.brand, width: 2)
|
|
: null,
|
|
),
|
|
),
|
|
if (!last)
|
|
const Expanded(
|
|
child: VerticalDivider(
|
|
width: 1,
|
|
thickness: 1,
|
|
color: DmColors.border,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Padding(
|
|
padding: EdgeInsets.fromLTRB(0, 10, 0, last ? 12 : 14),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(label, style: DmText.eyebrow),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
value,
|
|
style: DmText.cardTitle.copyWith(
|
|
fontSize: 15.5,
|
|
color: unset ? DmColors.brand : null,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
if (note != null)
|
|
Text(
|
|
note!,
|
|
style: DmText.small.copyWith(
|
|
fontSize: 12.5,
|
|
color: DmColors.ink3,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
const Icon(
|
|
LucideIcons.chevronRight,
|
|
size: 17,
|
|
color: DmColors.ink4,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|