Files
doormile_customer_app/lib/main.dart
Thiru-tenext 06fa6b797a Redesign: Poppins, a two-step destination, and a splash that says what the app does
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
2026-09-22 17:45:54 +05:30

254 lines
8.2 KiB
Dart

import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'data/app_config.dart';
import 'state/app_scope.dart';
import 'state/app_state.dart';
import 'ui/screens/auth/login_screen.dart';
import 'ui/screens/shell_screen.dart';
import 'ui/screens/splash_screen.dart';
import 'ui/tokens.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
// What this build is, in the log, on every launch.
//
// Not a debugging leftover: the offline build and the auto-login build look
// identical to the real one from the outside, and the whole reason the first
// mock was deleted was that nobody could tell which mode a handset was in.
// The Account screen says it too, but a build that cannot get past the login
// screen cannot show you the Account screen — which is exactly the session
// where you most need to know. Release builds print nothing.
if (!kReleaseMode) debugPrint('[BUILD] ${AppConfig.describe}');
// Draw behind the system bars — expected on Android 15+ and the reason the
// screens manage their own SafeArea insets.
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
runApp(const DoormileApp());
}
/// Doormile — customer app.
///
/// Book pickup → Track → Delivered.
///
/// `lib/data/doormile_api.dart` is the service surface, and it has exactly one
/// implementation: the live customer API. Nothing on screen is invented.
class DoormileApp extends StatefulWidget {
const DoormileApp({super.key, this.initialState});
/// Injectable for tests.
final AppState? initialState;
@override
State<DoormileApp> createState() => _DoormileAppState();
}
class _DoormileAppState extends State<DoormileApp> {
late final AppState _state = widget.initialState ?? AppState();
@override
void initState() {
super.initState();
// A returning customer's session outlives the process: the refresh token is
// good for 60 days. Look for it before deciding which screen to open.
unawaited(_state.restoreSession());
}
@override
void dispose() {
_state.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AppScope(
state: _state,
child: MaterialApp(
title: 'Doormile',
debugShowCheckedModeBanner: false,
theme: buildDoormileTheme(),
home: const _Launch(),
// No text-scale clamp: components adapt instead. Rows grow, important
// text wraps, and ellipsis is reserved for secondary information.
builder: (context, child) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
statusBarBrightness: Brightness.light,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
),
child: child ?? const SizedBox.shrink(),
);
},
),
);
}
}
ThemeData buildDoormileTheme() {
const scheme = ColorScheme.light(
primary: DmColors.brand,
onPrimary: Colors.white,
secondary: DmColors.brand,
onSecondary: Colors.white,
surface: DmColors.surface,
onSurface: DmColors.ink,
error: DmColors.danger,
);
return ThemeData(
useMaterial3: true,
fontFamily: 'Poppins',
colorScheme: scheme,
scaffoldBackgroundColor: DmColors.bg,
splashFactory: InkSparkle.splashFactory,
highlightColor: const Color(0x0A17110F),
textSelectionTheme: const TextSelectionThemeData(
cursorColor: DmColors.brand,
selectionColor: Color(0x338F0F06),
selectionHandleColor: DmColors.brand,
),
textTheme: const TextTheme().apply(
bodyColor: DmColors.ink,
displayColor: DmColors.ink,
),
dividerTheme: const DividerThemeData(
color: DmColors.hairline,
thickness: 1,
space: 1,
),
pageTransitionsTheme: const PageTransitionsTheme(
builders: {
TargetPlatform.android: _DmPageTransitions(),
TargetPlatform.iOS: _DmPageTransitions(),
TargetPlatform.macOS: _DmPageTransitions(),
TargetPlatform.windows: _DmPageTransitions(),
TargetPlatform.linux: _DmPageTransitions(),
},
),
);
}
/// Forward navigation, as a shared axis.
///
/// ── What was wrong with the old one ──
///
/// The incoming page slid 6% from the right and faded, and the page behind it
/// did nothing at all — it sat still until it was covered. That is the single
/// thing that makes a push feel like a slide projector rather than like
/// movement: both surfaces have to travel, or the eye reads the new one as
/// pasted over a photograph of the old one.
///
/// Now the outgoing page slides the other way and dims as it leaves, so the
/// pair share one axis of motion; the incoming page carries a small scale-up
/// so it arrives *towards* the viewer rather than merely across; and the fade
/// is held back until the travel is a third done, which is what stops the two
/// pages muddying into each other mid-transition.
///
/// The timing lives on [DmPageRoute]: 420ms in, 340ms back. Going back is
/// always quicker than going forward — the customer already knows what is
/// behind them.
class _DmPageTransitions extends PageTransitionsBuilder {
const _DmPageTransitions();
@override
Widget buildTransitions<T>(
PageRoute<T> route,
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
final enter = CurvedAnimation(
parent: animation,
curve: DmMotion.enter,
reverseCurve: DmMotion.enter.flipped,
);
final exit = CurvedAnimation(
parent: secondaryAnimation,
curve: DmMotion.enter,
reverseCurve: DmMotion.enter.flipped,
);
return SlideTransition(
// The page being covered leaves to the left, a third of the distance the
// arriving one travels. Parallax: the thing further away moves less.
position: Tween(
begin: Offset.zero,
end: const Offset(-0.09, 0),
).animate(exit),
child: FadeTransition(
opacity: Tween(begin: 1.0, end: 0.6).animate(exit),
child: SlideTransition(
position: Tween(
begin: const Offset(0.14, 0),
end: Offset.zero,
).animate(enter),
child: FadeTransition(
// Held back: at 0 the page is transparent, at 0.35 of the travel
// it is solid. Fading over the whole distance leaves both pages
// half-visible through each other for most of it.
opacity: CurvedAnimation(
parent: animation,
curve: const Interval(0, 0.35, curve: Curves.easeOut),
),
child: ScaleTransition(
scale: Tween(begin: 0.97, end: 1.0).animate(enter),
child: child,
),
),
),
),
);
}
}
/// What the app opens on.
///
/// Three states, and the middle one is the reason this widget exists: until the
/// stored session has been looked for we do not yet know whether this customer
/// is signed in, and showing them a login form that vanishes a moment later is
/// worse than showing them nothing.
///
/// That middle state used to be a blank canvas — correct, and a hole where the
/// app's first impression goes. It is [SplashScreen] now, which owns both the
/// wait and its own minimum, and tells this widget when it is finished. The
/// native window background carries the same mark from process start, so the
/// handover into Flutter is invisible.
class _Launch extends StatefulWidget {
const _Launch();
@override
State<_Launch> createState() => _LaunchState();
}
class _LaunchState extends State<_Launch> {
bool _splashDone = false;
@override
Widget build(BuildContext context) {
final app = AppScope.of(context);
if (!_splashDone) {
return SplashScreen(
ready: !app.restoringSession,
onDone: () => setState(() => _splashDone = true),
);
}
return app.isSignedIn ? const ShellScreen() : const LoginScreen();
}
}