Doormile/doormile_milderapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

production

Browse Source
This commit is contained in:
Thiru-tenext
2026-08-28 11:13:15 +05:30
parent d7348e253f
commit 5723d373b2
162 changed files with 17924 additions and 7026 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
lib/views/Dashboard/pickups/stop_verify.dart
View File

@@ -427,18 +427,25 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
onPopInvokedWithResult: (didPop, _) {
if (!didPop) _back();
},
// ── White page, tinted panels ──
// ── Grey page, white bands ──
//
// Dropping the borders left the sections floating: a white card on a
// near-white page has no edge at all, so five panels read as one long
// undifferentiated form. Inverting it is what the Home stop card already
// does — the page is white and the card carries the fill — and it is the
// only way to separate surfaces without drawing a line around each one.
// See [ColorConstants.cardSurface] for why the fill sits 9.4% off white
// rather than the ~3% a "subtle" grey would give: this screen is filled
// in outdoors.
// It was the other way round — a white page carrying tinted panels — and
// that inversion was itself a fix for panels that would not separate.
// Both readings work; this one is taken because of what it does to the
// *width*. A tinted panel has to be inset from the page or its fill runs
// into the screen edge, so every section sat inside a 20pt gutter and the
// page spent 40 of its 390 points on two strips of white that said
// nothing. A white band on a grey ground has no such problem: it can run
// the full width, because the ground showing above and below it is what
// separates one section from the next.
//
// So the sections are full-bleed now and the gutter lives *inside* them,
// where it is padding around content rather than margin around a box.
// Same air next to the words, ~40pt more of it for the words themselves —
// which on this screen is the difference between an address on two lines
// and an address on three.
child: Scaffold(
backgroundColor: ColorConstants.pureSurface,
backgroundColor: ColorConstants.daylightSurface,
// ── The bar breathes, and its title is a title ──
//
// 17sp jammed against the status bar is a system default, not a
@@ -462,15 +469,17 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
Expanded(
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
padding: EdgeInsets.fromLTRB(20.w, 16.h, 20.w, 24.h),
// No horizontal padding: every child of this column is a
// full-bleed band that carries its own. See the note on the
// scaffold's ground.
padding: EdgeInsets.only(bottom: 24.h),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_stopSummary(),
// No rule under the summary any more: the steps below
// are panels with their own edges, and a divider between a
// card and a card is a line drawn between two boundaries
// that already exist.
// are bands with the page's ground between them, and a
// divider between two boundaries is a third boundary.
if (_hasReview && _step >= _legs.length) ...[
SizedBox(height: 6.h),
_reviewStep(),
@@ -639,136 +648,155 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
// first thing on the page, so every leg opened by drawing the eye to the one
// block that needs nothing done to it. Unboxed it reads as a heading, which
// is what it is.
/// The stop, as the band the form is being filled in *about*.
///
/// Full-bleed white, like every section under it, so the page reads as one
/// stack of bands rather than a heading floating over a stack of boxes.
Widget _stopSummary() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ── Both halves give ground, neither is cut off ──
//
// A fixed badge, a `Spacer` and a fixed amount: the row was wider
// than a 360pt phone from 1.3x system text upward, and the rider who
// has turned his font up is the one who most needs to read "₹2450 to
// collect". Flexible on both sides costs nothing at normal size —
// each still takes its natural width — and lets the longer one
// ellipsise instead of striping the card black and yellow.
Row(
children: [
// The stop type as a dotted label rather than a filled badge. It
// is an attribute of the name below it, and a saturated chip made
// it the loudest thing on a screen whose subject is the form.
Container(
width: 6.w,
height: 6.w,
margin: EdgeInsets.only(right: 8.w),
decoration: BoxDecoration(
color: _kind.accent,
shape: BoxShape.circle,
),
),
Flexible(
child: Text(
_kind.titleLabel,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w700,
return MilerBand(
padding: EdgeInsets.fromLTRB(_bandPad, 16.h, _bandPad, 18.h),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ── Both halves give ground, neither is cut off ──
//
// A fixed badge, a `Spacer` and a fixed amount: the row was wider
// than a 360pt phone from 1.3x system text upward, and the rider who
// has turned his font up is the one who most needs to read "₹2450 to
// collect". Flexible on both sides costs nothing at normal size —
// each still takes its natural width — and lets the longer one
// ellipsise instead of striping the card black and yellow.
Row(
children: [
// The stop type as a dotted label rather than a filled badge. It
// is an attribute of the name below it, and a saturated chip made
// it the loudest thing on a screen whose subject is the form.
Container(
width: 6.w,
height: 6.w,
margin: EdgeInsets.only(right: 8.w),
decoration: BoxDecoration(
color: _kind.accent,
fontFamily: FontConstants.fontFamily,
shape: BoxShape.circle,
),
),
),
const Spacer(),
if (_cash > 0)
Flexible(
child: Text(
'₹${_cash.toStringAsFixed(0)} to collect',
_kind.titleLabel,
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w700,
color: ColorConstants.acceptGreen,
color: _kind.accent,
fontFamily: FontConstants.fontFamily,
),
),
),
],
),
SizedBox(height: 8.h),
Text(
_customerName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 19.sp,
fontWeight: FontWeight.w700,
letterSpacing: -0.5,
color: ColorConstants.slateText,
fontFamily: FontConstants.fontFamily,
const Spacer(),
if (_cash > 0)
Flexible(
child: Text(
'₹${_cash.toStringAsFixed(0)} to collect',
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 12.sp,
fontWeight: FontWeight.w700,
color: ColorConstants.acceptGreen,
fontFamily: FontConstants.fontFamily,
),
),
),
],
),
),
SizedBox(height: 5.h),
// The pin is doing work, not decorating: this line and the customer
// name above it are both grey-on-white running text at a glance, and
// the glyph is what says which of the two is the place.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 2.h, right: 6.w),
child: Icon(
LucideIcons.mapPin,
size: 14.sp,
color: ColorConstants.secondaryText,
),
SizedBox(height: 8.h),
Text(
_customerName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 19.sp,
fontWeight: FontWeight.w700,
letterSpacing: -0.5,
color: ColorConstants.slateText,
fontFamily: FontConstants.fontFamily,
),
Expanded(
child: Text(
_address,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: MilerType.micro.copyWith(
fontSize: 13.sp,
height: 1.4,
color: ColorConstants.onSurfaceVariant,
),
SizedBox(height: 5.h),
// The pin is doing work, not decorating: this line and the customer
// name above it are both grey-on-white running text at a glance, and
// the glyph is what says which of the two is the place.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 2.h, right: 6.w),
child: Icon(
LucideIcons.mapPin,
size: 14.sp,
color: ColorConstants.secondaryText,
),
),
),
],
),
SizedBox(height: 12.h),
// Wrap rather than Row: on a combined stop the two pills together are
// wider than the page once the system font is up, and the second one
// belongs on its own line rather than off the edge of the screen.
Wrap(
spacing: 7.w,
runSpacing: 7.h,
children: [
if (_expectedDelivery > 0)
_loadPill(
LucideIcons.truck,
'Hand over $_expectedDelivery',
ColorConstants.deliveryAccent,
Expanded(
child: Text(
_address,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: MilerType.micro.copyWith(
fontSize: 13.sp,
height: 1.4,
color: ColorConstants.onSurfaceVariant,
),
),
),
if (_expectedPickup > 0)
_loadPill(
LucideIcons.package,
'Collect $_expectedPickup',
ColorConstants.pickupAccent,
),
],
),
],
],
),
SizedBox(height: 12.h),
// Wrap rather than Row: on a combined stop the two pills together are
// wider than the page once the system font is up, and the second one
// belongs on its own line rather than off the edge of the screen.
Wrap(
spacing: 7.w,
runSpacing: 7.h,
children: [
if (_expectedDelivery > 0)
_loadPill(
LucideIcons.truck,
'Hand over $_expectedDelivery',
ColorConstants.deliveryAccent,
),
if (_expectedPickup > 0)
_loadPill(
LucideIcons.package,
'Collect $_expectedPickup',
ColorConstants.pickupAccent,
),
],
),
],
),
);
}
/// A finished band's ground: the accept green at 5.5%, resolved onto white
/// so it is an ordinary opaque colour rather than a wash that changes with
/// what is behind it.
static final Color _doneFill = ColorConstants.tint(
ColorConstants.acceptGreen,
0.055,
);
/// The inset a band keeps around its content — the app's own, so this page
/// and the shipment desk it hands off to line up at the same left margin.
double get _bandPad => MilerBand.pad;
Widget _loadPill(IconData icon, String label, Color accent) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 9.w, vertical: 6.h),
decoration: BoxDecoration(
color: accent.withValues(alpha: 0.10),
color: ColorConstants.tint(accent, 0.10),
borderRadius: BorderRadius.circular(DesignConstants.radiusLg),
),
child: Row(
@@ -897,7 +925,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 14.h),
decoration: BoxDecoration(
color: ticked
? ColorConstants.acceptGreen.withValues(alpha: 0.10)
? ColorConstants.tint(ColorConstants.acceptGreen, 0.10)
: ColorConstants.pureSurface,
borderRadius: BorderRadius.circular(DesignConstants.radiusLg),
// The tick is the whole point of this control, so the untouched state
@@ -1167,10 +1195,12 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// The heading lives on the page, not in a card — this is the screen
// talking, not a section of it.
Padding(
padding: EdgeInsets.fromLTRB(4.w, 4.h, 4.w, 0),
// The heading is the screen talking rather than a section of it, but it
// is still a band: with full-bleed sections under it, a heading inset
// by its own margin is the one thing on the page whose left edge does
// not line up with everything else.
MilerBand(
padding: EdgeInsets.fromLTRB(_bandPad, 16.h, _bandPad, 18.h),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -1219,7 +1249,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
],
),
),
SizedBox(height: 14.h),
SizedBox(height: MilerBand.gap),
if (_kind.hasDelivery)
_reviewLeg(
@@ -1251,7 +1281,8 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
],
),
if (_kind.hasDelivery && _kind.hasPickup) SizedBox(height: 12.h),
if (_kind.hasDelivery && _kind.hasPickup)
SizedBox(height: MilerBand.gap),
if (_kind.hasPickup)
_reviewLeg(
@@ -1296,7 +1327,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
),
if (_cash > 0) ...[
SizedBox(height: 12.h),
SizedBox(height: MilerBand.gap),
_notice(
'Collect ₹${_cash.toStringAsFixed(0)} from the customer on the '
'next screen',
@@ -1326,13 +1357,10 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
required bool done,
File? photo,
}) {
return Container(
width: double.infinity,
padding: EdgeInsets.all(16.r),
decoration: BoxDecoration(
color: ColorConstants.cardSurface,
borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
),
// White, and full-bleed like every other band. It was a tinted rounded card,
// which on a grey page is a box on a box: the ground between two bands
// already says these are two legs of the stop.
return MilerBand(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -1375,8 +1403,8 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
return Container(
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 3.h),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
color: ColorConstants.tint(color, 0.12),
borderRadius: BorderRadius.circular(DesignConstants.radiusFull),
),
child: Row(
mainAxisSize: MainAxisSize.min,
@@ -1425,7 +1453,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 14.h),
decoration: BoxDecoration(
color: ColorConstants.warning.withValues(alpha: 0.10),
color: ColorConstants.tint(ColorConstants.warning, 0.10),
borderRadius: BorderRadius.circular(DesignConstants.radiusLg),
),
child: Row(
@@ -1904,26 +1932,19 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
final accent = done ? ColorConstants.acceptGreen : _legAccent;
return Padding(
padding: EdgeInsets.only(top: 14.h),
child: AnimatedContainer(
duration: DesignConstants.motionState,
curve: Curves.easeOut,
width: double.infinity,
padding: EdgeInsets.fromLTRB(16.w, 15.h, 16.w, 16.h),
decoration: BoxDecoration(
// Done recedes; outstanding keeps the page. Neither is a border
// colour — a filled state survives sunlight and a 1px edge does not.
color: done
? ColorConstants.acceptGreen.withValues(alpha: 0.055)
: ColorConstants.daylightSurface,
borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
border: Border.all(
color: done
? ColorConstants.acceptGreen.withValues(alpha: 0.22)
: ColorConstants.borderSubtle,
width: 1.2,
),
),
padding: EdgeInsets.only(top: MilerBand.gap),
// ── State in the fill, and the fill is a colour rather than a wash ──
//
// Done recedes and outstanding keeps the page; that is the right property
// to carry it, because a fill is the one thing readable at arm's length
// in sun. Both states are opaque colours rather than the accent laid over
// whatever is behind (see [ColorConstants.tint]), and the finished band
// adds the rail, which is what replaced the tinted outline these sections
// 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,
children: [
@@ -1935,7 +1956,11 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
height: 30.w,
alignment: Alignment.center,
decoration: BoxDecoration(
color: accent.withValues(alpha: 0.11),
color: ColorConstants.tint(
accent,
0.11,
on: done ? _doneFill : ColorConstants.pureSurface,
),
borderRadius: BorderRadius.circular(
DesignConstants.radiusLg,
),
@@ -2020,7 +2045,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
return Container(
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 3.h),
decoration: BoxDecoration(
color: ColorConstants.warning.withValues(alpha: 0.10),
color: ColorConstants.tint(ColorConstants.warning, 0.10),
borderRadius: BorderRadius.circular(DesignConstants.radiusFull),
),
child: Text(
@@ -2274,7 +2299,7 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
padding: EdgeInsets.symmetric(vertical: 30.h),
width: double.infinity,
decoration: BoxDecoration(
color: accent.withValues(alpha: 0.06),
color: ColorConstants.tint(accent, 0.06),
borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
border: Border.all(color: accent.withValues(alpha: 0.30), width: 1.4),
),
@@ -2302,9 +2327,14 @@ class _StopVerificationPageState extends State<StopVerificationPage> {
Widget _notice(String text, Color accent) {
return Container(
width: double.infinity,
margin: EdgeInsets.symmetric(horizontal: _bandPad),
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 11.h),
decoration: BoxDecoration(
color: accent.withValues(alpha: 0.10),
color: ColorConstants.tint(
accent,
0.10,
on: ColorConstants.daylightSurface,
),
borderRadius: BorderRadius.circular(DesignConstants.radiusLg),
),
child: Row(