Replace the customer app with Doormile CX
Book a pickup, track it to delivery — the rebuilt customer app. - Design language from doormile-screens.html: brand #8F0F06, Manrope + Geist Mono (variable fonts), bordered cards instead of shadows, crimson brand headers, sliding tab indicator, mono for anything read digit by digit. - lib/data (one live API implementation, plus a debug-only offline fake), lib/state, lib/ui (tokens, widgets, screens). - 84 tests, plus a design snapshot harness that renders every screen with the real fonts: flutter test test/design_snapshot_test.dart --run-skipped --update-goldens This replaces the previous app (pubspec 'doormile', app id com.doormile.customer). That tree remains in history at 6c7d656; note its android/app/google-services.json is not carried over, and the application id here is in.doormile.customer. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
260
lib/ui/widgets/misc.dart
Normal file
260
lib/ui/widgets/misc.dart
Normal file
@@ -0,0 +1,260 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../tokens.dart';
|
||||
|
||||
/// One accent, three intensities — the design's `.st`.
|
||||
enum DmPillTone {
|
||||
/// Something is happening right now and nobody has to do anything: searching
|
||||
/// for a Miler, out for delivery. Crimson field, white label, solid dot.
|
||||
live,
|
||||
|
||||
/// Moving, but between beats — assigned, in transit. The crimson is held in
|
||||
/// an outline so a list of six orders is not six red blocks.
|
||||
neutral,
|
||||
|
||||
/// Finished. Grey, with a filled dot: the journey happened.
|
||||
done,
|
||||
|
||||
/// Never happened. Grey, hollow dot.
|
||||
off,
|
||||
}
|
||||
|
||||
/// Status pill used on order rows and at the head of a tracking card.
|
||||
class DmPill extends StatelessWidget {
|
||||
const DmPill(this.label, {super.key, this.tone = DmPillTone.neutral});
|
||||
|
||||
final String label;
|
||||
final DmPillTone tone;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final (Color bg, Color fg, BoxBorder? edge) = switch (tone) {
|
||||
DmPillTone.live => (DmColors.brand, Colors.white, null),
|
||||
DmPillTone.neutral => (
|
||||
DmColors.surface,
|
||||
DmColors.brand,
|
||||
Border.all(color: DmColors.brandLine),
|
||||
),
|
||||
DmPillTone.done => (DmColors.surfaceAlt, DmColors.ink3, null),
|
||||
DmPillTone.off => (DmColors.surfaceAlt, DmColors.ink3, null),
|
||||
};
|
||||
|
||||
// The dot is the tone's tell at a glance, before the word is read: filled
|
||||
// for anything that happened or is happening, hollow for what never did.
|
||||
final hollow = tone == DmPillTone.off;
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.fromLTRB(11, 5, 11, 5),
|
||||
decoration: BoxDecoration(
|
||||
color: bg,
|
||||
border: edge,
|
||||
borderRadius: DmRadius.all(5),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
margin: const EdgeInsets.only(right: 7),
|
||||
decoration: BoxDecoration(
|
||||
color: hollow ? Colors.transparent : fg,
|
||||
shape: BoxShape.circle,
|
||||
border: hollow ? Border.all(color: fg, width: 1.5) : null,
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: DmText.label.copyWith(fontSize: 12.5, color: fg),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The pulsing dot that marks a live booking.
|
||||
class DmLiveDot extends StatefulWidget {
|
||||
const DmLiveDot({super.key, this.size = 9, this.color = DmColors.brand});
|
||||
|
||||
final double size;
|
||||
final Color color;
|
||||
|
||||
@override
|
||||
State<DmLiveDot> createState() => _DmLiveDotState();
|
||||
}
|
||||
|
||||
class _DmLiveDotState extends State<DmLiveDot>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late final AnimationController _c = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 1900),
|
||||
);
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// A ring that never stops is a battery cost and, for anyone who asked the
|
||||
// system not to animate, a distraction. Honour the setting: the dot still
|
||||
// reads as live because it is a filled brand dot on a quiet row.
|
||||
if (!WidgetsBinding.instance.platformDispatcher.accessibilityFeatures.disableAnimations) {
|
||||
_c.repeat();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_c.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final span = widget.size + 10;
|
||||
return SizedBox(
|
||||
width: span,
|
||||
height: span,
|
||||
child: AnimatedBuilder(
|
||||
animation: _c,
|
||||
builder: (context, child) {
|
||||
return Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
if (_c.isAnimating)
|
||||
Transform.scale(
|
||||
scale: 1 + _c.value * 1.6,
|
||||
child: Opacity(
|
||||
opacity: (1 - _c.value) * 0.5,
|
||||
child: Container(
|
||||
width: widget.size,
|
||||
height: widget.size,
|
||||
decoration: BoxDecoration(
|
||||
color: widget.color,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
child!,
|
||||
],
|
||||
);
|
||||
},
|
||||
child: Container(
|
||||
width: widget.size,
|
||||
height: widget.size,
|
||||
decoration: BoxDecoration(
|
||||
color: widget.color,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Initials avatar. Crimson-filled on a light surface, lightened white when it
|
||||
/// sits on the brand header.
|
||||
class DmAvatar extends StatelessWidget {
|
||||
const DmAvatar({
|
||||
super.key,
|
||||
required this.initials,
|
||||
this.size = 42,
|
||||
this.onBrand = false,
|
||||
});
|
||||
|
||||
final String initials;
|
||||
final double size;
|
||||
final bool onBrand;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: size,
|
||||
height: size,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: onBrand ? DmColors.onBrandRaise : DmColors.brand,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Text(
|
||||
initials,
|
||||
style: DmText.label.copyWith(
|
||||
fontSize: size < 40 ? 12 : 13,
|
||||
fontWeight: FontWeight.w800,
|
||||
fontVariations: const [FontVariation('wght', 800)],
|
||||
letterSpacing: 0.13,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The Doormile logomark: a door inside a house silhouette.
|
||||
class DoormileMark extends StatelessWidget {
|
||||
const DoormileMark({super.key, this.size = 52, this.inverted = false});
|
||||
|
||||
final double size;
|
||||
|
||||
/// White strokes on nothing, for use on the crimson field.
|
||||
final bool inverted;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: size,
|
||||
height: size,
|
||||
decoration: BoxDecoration(
|
||||
color: inverted ? Colors.transparent : DmColors.brand,
|
||||
borderRadius: DmRadius.all(size * 0.24),
|
||||
),
|
||||
child: CustomPaint(
|
||||
painter: const _MarkPainter(),
|
||||
size: Size.square(size),
|
||||
child: SizedBox.square(dimension: size),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MarkPainter extends CustomPainter {
|
||||
const _MarkPainter();
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final s = size.width;
|
||||
final paint = Paint()
|
||||
..color = Colors.white
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = s * 0.072
|
||||
..strokeJoin = StrokeJoin.round
|
||||
..strokeCap = StrokeCap.round;
|
||||
|
||||
// Roof + walls, drawn on a 24x24 grid scaled to the mark.
|
||||
double u(double v) => v / 24 * s * 0.62 + s * 0.19;
|
||||
|
||||
final house = Path()
|
||||
..moveTo(u(3.6), u(9.2))
|
||||
..lineTo(u(12), u(4))
|
||||
..lineTo(u(20.4), u(9.2))
|
||||
..lineTo(u(20.4), u(20))
|
||||
..lineTo(u(3.6), u(20))
|
||||
..close();
|
||||
|
||||
final door = Path()
|
||||
..moveTo(u(9.4), u(20))
|
||||
..lineTo(u(9.4), u(13))
|
||||
..lineTo(u(14.6), u(13))
|
||||
..lineTo(u(14.6), u(20));
|
||||
|
||||
canvas.drawPath(house, paint);
|
||||
canvas.drawPath(door, paint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant _MarkPainter oldDelegate) => false;
|
||||
}
|
||||
Reference in New Issue
Block a user