miler map
This commit is contained in:
@@ -9,6 +9,7 @@ import 'package:image_picker/image_picker.dart';
|
||||
import 'package:miler/data/service_profile.dart';
|
||||
import 'package:miler/views/Dashboard/pickups/stop_type.dart';
|
||||
import 'package:miler/views/helpers/constants/Colorconstants.dart';
|
||||
import 'package:miler/views/helpers/constants/miler_surface.dart';
|
||||
import 'package:miler/views/helpers/constants/design_constants.dart';
|
||||
import 'package:miler/views/helpers/constants/miler_type.dart';
|
||||
import 'package:miler/views/helpers/constants/Font_constant.dart';
|
||||
@@ -445,7 +446,14 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
// which on this screen is the difference between an address on two lines
|
||||
// and an address on three.
|
||||
child: Scaffold(
|
||||
backgroundColor: ColorConstants.daylightSurface,
|
||||
// ── The canvas, not the old slate ──
|
||||
//
|
||||
// This was `daylightSurface` — #DEE3EA, the heavy grey the whole app
|
||||
// used to sit on. The ground moved to a near-white canvas when cards
|
||||
// took on a hairline and a lift (see [Narrative]); these screens kept
|
||||
// the old value, so the flow a rider spends the most time in was the
|
||||
// one place still showing dark bars between its sections.
|
||||
backgroundColor: MilerSurface.canvas,
|
||||
// ── The bar breathes, and its title is a title ──
|
||||
//
|
||||
// 17sp jammed against the status bar is a system default, not a
|
||||
@@ -600,7 +608,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
'${idx + 1}',
|
||||
style: TextStyle(
|
||||
fontSize: 11.5.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: current
|
||||
? Colors.white
|
||||
: ColorConstants.secondaryText,
|
||||
@@ -620,7 +628,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
style: TextStyle(
|
||||
fontSize: 10.5.sp,
|
||||
height: 1.2,
|
||||
fontWeight: current ? FontWeight.w700 : FontWeight.w500,
|
||||
fontWeight: current ? FontWeight.w800 : FontWeight.w600,
|
||||
color: past
|
||||
? ColorConstants.acceptGreen
|
||||
: current
|
||||
@@ -687,7 +695,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: _kind.accent,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -703,7 +711,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
textAlign: TextAlign.right,
|
||||
style: TextStyle(
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: ColorConstants.acceptGreen,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -718,7 +726,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 19.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -0.5,
|
||||
color: ColorConstants.slateText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
@@ -811,7 +819,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 11.5.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: accent,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -859,17 +867,14 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_choiceGrid(
|
||||
count: _Recipient.values.length,
|
||||
chips: (width, lastWidth) => [
|
||||
for (final (i, r) in _Recipient.values.indexed)
|
||||
chips: (width) => [
|
||||
for (final r in _Recipient.values)
|
||||
_choiceChip(
|
||||
label: r.label,
|
||||
icon: r.icon,
|
||||
selected: _recipient == r,
|
||||
accent: ColorConstants.deliveryAccent,
|
||||
width: i == _Recipient.values.length - 1
|
||||
? lastWidth
|
||||
: width,
|
||||
width: width,
|
||||
onTap: () => setState(() => _recipient = r),
|
||||
),
|
||||
],
|
||||
@@ -955,7 +960,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: ColorConstants.slateText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -974,7 +979,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 11.5.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: ColorConstants.acceptGreen,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -1020,15 +1025,14 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
done: !_condition.needsNote,
|
||||
icon: LucideIcons.badgeCheck,
|
||||
child: _choiceGrid(
|
||||
count: _Condition.values.length,
|
||||
chips: (width, lastWidth) => [
|
||||
for (final (i, c) in _Condition.values.indexed)
|
||||
chips: (width) => [
|
||||
for (final c in _Condition.values)
|
||||
_choiceChip(
|
||||
label: c.label,
|
||||
icon: c.icon,
|
||||
selected: _condition == c,
|
||||
accent: c.accent,
|
||||
width: i == _Condition.values.length - 1 ? lastWidth : width,
|
||||
width: width,
|
||||
onTap: () => setState(() => _condition = c),
|
||||
),
|
||||
],
|
||||
@@ -1149,7 +1153,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
'$_collected',
|
||||
style: TextStyle(
|
||||
fontSize: 30.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -1,
|
||||
height: 1.1,
|
||||
color: ColorConstants.slateText,
|
||||
@@ -1160,7 +1164,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
'of $_expectedPickup booked',
|
||||
style: TextStyle(
|
||||
fontSize: 11.5.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: ColorConstants.secondaryText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -1223,7 +1227,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
: 'Something is missing',
|
||||
style: TextStyle(
|
||||
fontSize: 19.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -0.5,
|
||||
color: ColorConstants.slateText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
@@ -1241,7 +1245,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
style: TextStyle(
|
||||
fontSize: 13.5.sp,
|
||||
height: 1.4,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: ColorConstants.secondaryText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -1375,7 +1379,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 11.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: 0.8,
|
||||
color: accent,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
@@ -1419,7 +1423,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
done ? 'Complete' : 'Unfinished',
|
||||
style: TextStyle(
|
||||
fontSize: 10.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: 0.2,
|
||||
color: color,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
@@ -1469,7 +1473,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
'No proof photo — go back and take one',
|
||||
style: TextStyle(
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: ColorConstants.warning,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -1524,7 +1528,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
'Tap to enlarge',
|
||||
style: TextStyle(
|
||||
fontSize: 10.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: Colors.white,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -1649,7 +1653,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 11.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: ColorConstants.secondaryText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -1665,7 +1669,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
style: TextStyle(
|
||||
fontSize: 15.sp,
|
||||
height: 1.25,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: fact.mono ? 1.2 : -0.3,
|
||||
color: ColorConstants.slateText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
@@ -1715,7 +1719,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 12.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: ColorConstants.secondaryText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -1810,7 +1814,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: ColorConstants.secondaryText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -1943,7 +1947,6 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
// used to close with. See [MilerBand].
|
||||
child: MilerBand(
|
||||
color: done ? _doneFill : ColorConstants.pureSurface,
|
||||
rail: done ? ColorConstants.acceptGreen : null,
|
||||
padding: EdgeInsets.fromLTRB(_bandPad, 15.h, _bandPad, 17.h),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
@@ -1981,7 +1984,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
title,
|
||||
style: MilerType.body.copyWith(
|
||||
fontSize: 15.5.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -0.25,
|
||||
),
|
||||
),
|
||||
@@ -2022,7 +2025,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
'Optional',
|
||||
style: TextStyle(
|
||||
fontSize: 11.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: ColorConstants.secondaryText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -2052,7 +2055,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
'Required',
|
||||
style: TextStyle(
|
||||
fontSize: 9.5.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: 0.3,
|
||||
color: ColorConstants.warning,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
@@ -2078,20 +2081,22 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
/// two-up grid leaves the third at half width on a line of its own, which
|
||||
/// looks like the grid ran out rather than like a row. The last one takes the
|
||||
/// full width instead, and the block reads as two deliberate rows.
|
||||
Widget _choiceGrid({
|
||||
required int count,
|
||||
required List<Widget> Function(double width, double lastWidth) chips,
|
||||
}) {
|
||||
Widget _choiceGrid({required List<Widget> Function(double width) chips}) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
const gap = 9.0;
|
||||
final full = constraints.maxWidth;
|
||||
final half = (full - gap) / 2;
|
||||
return Wrap(
|
||||
spacing: gap,
|
||||
runSpacing: gap,
|
||||
children: chips(half, count.isOdd ? full : half),
|
||||
);
|
||||
// ── An odd last option keeps its column ──
|
||||
//
|
||||
// It used to stretch to the full width, and with three options that put
|
||||
// the biggest target on the screen under `Damaged` — the rarest choice
|
||||
// and the one with the worst consequence, drawn twice the size of
|
||||
// `Sealed & intact`. Size is emphasis, and this set has no reason to
|
||||
// emphasise its exception.
|
||||
//
|
||||
// A grid with an empty cell in the last row is what a grid looks like.
|
||||
return Wrap(spacing: gap, runSpacing: gap, children: chips(half));
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -2121,7 +2126,22 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
constraints: BoxConstraints(minHeight: 52.h),
|
||||
alignment: Alignment.centerLeft,
|
||||
decoration: BoxDecoration(
|
||||
color: selected ? accent : ColorConstants.pureSurface,
|
||||
// ── Selection is a tint and an edge, not a slab ──
|
||||
//
|
||||
// The chosen option was painted in the accent at full strength with
|
||||
// white type on it. At 52pt tall and half the page wide that is not
|
||||
// a selected option, it is a filled button — the heaviest object on
|
||||
// a screen whose actual button is at the foot of it, and on a
|
||||
// finished section it put a block of solid green inside a card that
|
||||
// was already green.
|
||||
//
|
||||
// The accent at a tenth, under an edge of the accent itself, with
|
||||
// the label in it. It is the treatment the payment tiles and the
|
||||
// service chips in this same flow already use, so a rider learns
|
||||
// "chosen looks like this" once.
|
||||
color: selected
|
||||
? ColorConstants.tint(accent, 0.10)
|
||||
: ColorConstants.pureSurface,
|
||||
borderRadius: BorderRadius.circular(DesignConstants.radiusLg),
|
||||
// An edge at rest. On the old grey panel a white chip separated
|
||||
// itself by fill alone; on a white page it has nothing to separate
|
||||
@@ -2129,7 +2149,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
// option the rider does not know he can press.
|
||||
border: Border.all(
|
||||
color: selected ? accent : ColorConstants.borderStrong,
|
||||
width: 1.4,
|
||||
width: selected ? 1.6 : 1.4,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
@@ -2145,7 +2165,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
Icon(
|
||||
icon,
|
||||
size: 16.sp,
|
||||
color: selected ? Colors.white : ColorConstants.secondaryText,
|
||||
color: selected ? accent : ColorConstants.secondaryText,
|
||||
),
|
||||
SizedBox(width: 7.w),
|
||||
// Flexible, not a bare Text. A [Wrap] hands every chip the full page
|
||||
@@ -2161,8 +2181,8 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 13.sp,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: selected ? Colors.white : ColorConstants.slateText,
|
||||
fontWeight: selected ? FontWeight.w800 : FontWeight.w700,
|
||||
color: selected ? accent : ColorConstants.slateText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
);
|
||||
@@ -2195,7 +2215,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
onChanged: (_) => setState(() {}),
|
||||
style: TextStyle(
|
||||
fontSize: 14.sp,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: ColorConstants.slateText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -2203,7 +2223,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
hintText: hint,
|
||||
hintStyle: TextStyle(
|
||||
fontSize: 13.5.sp,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: ColorConstants.secondaryText,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -2213,7 +2233,17 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
color: ColorConstants.secondaryText,
|
||||
),
|
||||
filled: true,
|
||||
fillColor: ColorConstants.pureSurface,
|
||||
// ── A field on a white card needs a ground of its own ──
|
||||
//
|
||||
// This was `pureSurface` — white type on white inside a white card,
|
||||
// separated from it by a hairline alone. It read as a line drawn on the
|
||||
// card rather than as somewhere to type, and at arm's length in sun the
|
||||
// hairline is the first thing to go.
|
||||
//
|
||||
// The canvas is the app's own "one step back from a surface" tone, so a
|
||||
// field wearing it sits *in* the card the way a well does, and the
|
||||
// hairline becomes the edge of a shape rather than the whole of it.
|
||||
fillColor: MilerSurface.canvas,
|
||||
contentPadding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 13.h),
|
||||
// Outlined at rest, with the accent spent on the field the cursor is
|
||||
// in. This was borderless, which worked while the fill sat on a grey
|
||||
@@ -2313,7 +2343,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
'Take photo',
|
||||
style: TextStyle(
|
||||
fontSize: 13.5.sp,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: accent,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -2330,10 +2360,12 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
margin: EdgeInsets.symmetric(horizontal: _bandPad),
|
||||
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 11.h),
|
||||
decoration: BoxDecoration(
|
||||
// Tinted *onto the card it sits on*. Mixed against the old page slate
|
||||
// it came out darker than its own surface, which reads as a hole.
|
||||
color: ColorConstants.tint(
|
||||
accent,
|
||||
0.10,
|
||||
on: ColorConstants.daylightSurface,
|
||||
on: ColorConstants.pureSurface,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(DesignConstants.radiusLg),
|
||||
),
|
||||
@@ -2347,7 +2379,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
|
||||
style: TextStyle(
|
||||
fontSize: 12.sp,
|
||||
height: 1.35,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: accent,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user