203 lines
8.8 KiB
Dart
203 lines
8.8 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
|
|
import 'package:miler/views/helpers/constants/Colorconstants.dart';
|
|
import 'package:miler/views/helpers/constants/design_constants.dart';
|
|
import 'package:miler/views/helpers/constants/Font_constant.dart';
|
|
import 'package:miler/views/helpers/widgets/app_widgets.dart';
|
|
import 'package:miler/widget/Bottom_page.dart';
|
|
|
|
/// ─────────────────────────────────────────────────────────────────────────
|
|
/// SELECTION BAR — the contextual action for a multi-stop pick
|
|
///
|
|
/// Appears the moment the rider ticks a stop and leaves when he unticks the
|
|
/// last one. While it is up it owns the bulk action: the inline "Accept all N
|
|
/// stops" button in the trip's footer stands down, so there is never a choice
|
|
/// of two bulk buttons pointing at different sets of stops.
|
|
///
|
|
/// ── Why this floats instead of sitting in the list ──
|
|
///
|
|
/// It used to be an inline button in the footer, below the stop rows. That put
|
|
/// a *response to a direct action* at the bottom of a scroll: tick a stop near
|
|
/// the top of a six-stop route and the button confirming what you had just done
|
|
/// was off-screen. The rider had no feedback that the tick had registered
|
|
/// beyond the tick itself, and no way to act on it without scrolling past every
|
|
/// remaining stop.
|
|
///
|
|
/// A selection is transient and it is *modal in spirit* — the screen is in a
|
|
/// different mode while it is non-empty. Every app that does multi-select the
|
|
/// way riders already know it, Gmail and Google Photos included, answers that
|
|
/// with a contextual bar pinned to the edge of the viewport: it appears with
|
|
/// the selection, it is always reachable, and it leaves without a trace. The
|
|
/// count lives on it, so the rider never has to go looking for how many he has
|
|
/// picked.
|
|
///
|
|
/// ── Clearing ──
|
|
///
|
|
/// The ✕ is on the left, where a dismiss belongs and where it cannot be hit by
|
|
/// a thumb going for Accept. Without it the only way out of a selection was to
|
|
/// untick each stop by hand, which on a six-stop route is six taps to undo one
|
|
/// mistake.
|
|
/// ─────────────────────────────────────────────────────────────────────────
|
|
class SelectionBar extends StatelessWidget {
|
|
/// How many stops are ticked. Zero renders nothing.
|
|
final int count;
|
|
|
|
/// Accepts exactly the ticked stops.
|
|
final VoidCallback? onAccept;
|
|
|
|
/// Declines exactly the ticked stops, after asking why. Null hides the
|
|
/// action.
|
|
final VoidCallback? onReject;
|
|
|
|
/// Drops the whole selection.
|
|
final VoidCallback onClear;
|
|
|
|
/// True while the accept is in flight.
|
|
final bool busy;
|
|
|
|
const SelectionBar({
|
|
super.key,
|
|
required this.count,
|
|
required this.onAccept,
|
|
required this.onClear,
|
|
this.onReject,
|
|
this.busy = false,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// Rides the floating nav bar: it is `Positioned` outside the Scaffold's
|
|
// body, so `SafeArea` knows nothing about it and anything pinned to the
|
|
// bottom lands underneath. See [BottomPage.bottomInset].
|
|
//
|
|
// A fixed inset now. This used to follow a `navVisible` notifier up and
|
|
// down, because the bar left the screen entirely on scroll. It compacts
|
|
// instead of leaving, so there is no longer a state in which the room is
|
|
// free — and chasing the 20pt difference re-laid this out every time the
|
|
// rider changed scroll direction, for a gap he would never notice.
|
|
return Padding(
|
|
padding: EdgeInsets.only(bottom: BottomPage.bottomInset(context) + 10.h),
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w),
|
|
child: Material(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
|
|
// A real lift, not the page's usual whisper: this is the one surface
|
|
// on Home that is temporarily above everything else, and it has to
|
|
// read that way against a list of white cards.
|
|
elevation: 0,
|
|
child: Container(
|
|
padding: EdgeInsets.fromLTRB(6.w, 8.h, 10.w, 8.h),
|
|
decoration: BoxDecoration(
|
|
color: ColorConstants.pureSurface,
|
|
borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
|
|
border: Border.all(color: ColorConstants.borderSubtle),
|
|
boxShadow: DesignConstants.shadowLg,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
_ClearButton(onTap: busy ? null : onClear),
|
|
SizedBox(width: 2.w),
|
|
// The running count, in words — but only when there is room for
|
|
// it. With two decisions on the bar there is not: at 320pt the
|
|
// three fixed controls plus this line overflowed by 94pt, and
|
|
// "Accept 3" already carries the number. So the sentence is a
|
|
// luxury for the one-button case and the space goes to the
|
|
// buttons otherwise.
|
|
if (onReject == null)
|
|
Expanded(
|
|
child: Text(
|
|
'$count ${count == 1 ? 'stop' : 'stops'} selected',
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontSize: 13.5.sp,
|
|
fontWeight: FontWeight.w800,
|
|
letterSpacing: -0.2,
|
|
color: ColorConstants.slateText,
|
|
fontFamily: FontConstants.fontFamily,
|
|
),
|
|
),
|
|
)
|
|
else
|
|
const Spacer(),
|
|
SizedBox(width: 6.w),
|
|
// ── Both decisions, on the bar ──
|
|
//
|
|
// Reject used to live on every stop row and went when the rows
|
|
// became tick-only. That left the rider able to say yes to a
|
|
// selection and nothing else: declining a stop he could not do
|
|
// — shop shut, address wrong — had no route at all, and the hub
|
|
// learned about it by the stop simply never being accepted.
|
|
//
|
|
// So it comes back where Accept is, on the set he has picked.
|
|
// Outlined and unlabelled-by-count against Accept's filled
|
|
// green: they are not equal choices, and the one that ends work
|
|
// should not look like the one that starts it.
|
|
if (onReject != null) ...[
|
|
Flexible(
|
|
child: MilerButton(
|
|
// No icon, and flexible: the width an icon costs is width
|
|
// the two labels need side by side on a 320pt phone, and
|
|
// under real pressure the pair should give ground evenly
|
|
// rather than run off the edge of the bar.
|
|
label: 'Reject',
|
|
variant: MilerButtonVariant.outlined,
|
|
color: ColorConstants.errorRed,
|
|
height: ButtonSizes.secondary,
|
|
expand: false,
|
|
onPressed: busy ? null : onReject,
|
|
),
|
|
),
|
|
SizedBox(width: 8.w),
|
|
],
|
|
// Content-hugging, so the count on the left keeps its room on a
|
|
// narrow phone and the label never ellipsises — a bulk action
|
|
// that reads "Accept 3 sto…" is not one the rider will trust.
|
|
Flexible(
|
|
child: MilerButton(
|
|
label: 'Accept $count',
|
|
icon: Icons.done_all_rounded,
|
|
color: ColorConstants.acceptGreen,
|
|
height: ButtonSizes.secondary,
|
|
expand: false,
|
|
loading: busy,
|
|
onPressed: onAccept,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ClearButton extends StatelessWidget {
|
|
final VoidCallback? onTap;
|
|
const _ClearButton({this.onTap});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Semantics(
|
|
button: true,
|
|
label: 'Clear selection',
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(DesignConstants.radiusFull),
|
|
child: SizedBox(
|
|
width: ButtonSizes.minTapTarget,
|
|
height: ButtonSizes.minTapTarget,
|
|
child: Icon(
|
|
Icons.close_rounded,
|
|
size: 20.sp,
|
|
color: ColorConstants.secondaryText,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|