miler map
This commit is contained in:
@@ -9,6 +9,7 @@ import 'package:get/get.dart';
|
||||
import 'package:shimmer/shimmer.dart';
|
||||
|
||||
import 'package:miler/Models/stop_status.dart';
|
||||
import 'package:miler/views/helpers/constants/narrative.dart';
|
||||
import 'package:miler/views/helpers/constants/miler_type.dart';
|
||||
import 'package:miler/views/helpers/widgets/miler_app_bar.dart'
|
||||
show milerBrandSurface;
|
||||
@@ -64,10 +65,6 @@ class MilerBand extends StatelessWidget {
|
||||
/// translucent wash is the wrong tool for a surface.
|
||||
final Color? color;
|
||||
|
||||
/// An accent stripe down the leading edge, for a band whose state has to
|
||||
/// read without being examined. Null draws no stripe and no inset.
|
||||
final Color? rail;
|
||||
|
||||
/// Overrides the standard inset. Pass only where the child owns its own
|
||||
/// horizontal padding — a row that has to bleed to the band's edge.
|
||||
final EdgeInsets? padding;
|
||||
@@ -76,21 +73,36 @@ class MilerBand extends StatelessWidget {
|
||||
super.key,
|
||||
required this.child,
|
||||
this.color,
|
||||
this.rail,
|
||||
this.padding,
|
||||
});
|
||||
|
||||
/// The inset a band keeps around its content.
|
||||
///
|
||||
/// One number for the whole app. With the bands running edge to edge, their
|
||||
/// padding is the only thing left aligning the page's left margin — two
|
||||
/// bands a couple of points apart is exactly how a column of text stops
|
||||
/// looking like a column.
|
||||
static double get pad => 20.w;
|
||||
/// One number for the whole app: two bands a couple of points apart is
|
||||
/// exactly how a column of text stops looking like a column.
|
||||
static double get pad => 18.w;
|
||||
|
||||
/// The gap of page ground between one band and the next. This is the only
|
||||
/// separator a band has, so it is a real gap rather than a hairline.
|
||||
static double get gap => 10.h;
|
||||
/// The page margin the band sits in.
|
||||
///
|
||||
/// ── Bands used to run edge to edge, and the page paid for it ──
|
||||
///
|
||||
/// A full-bleed band has no shape of its own, so the only thing separating
|
||||
/// one from the next was a [gap] of bare page showing through — which turned
|
||||
/// the ground into a set of stripes between the content. On the old slate
|
||||
/// canvas those stripes were dark grey bars, and the screen read as a stack
|
||||
/// of unrelated slabs rather than as a form.
|
||||
///
|
||||
/// A band is a card now: inset from both edges, rounded, on a hairline and a
|
||||
/// soft lift. The gap between two of them is air rather than a bar, and the
|
||||
/// page's left margin is the card's edge instead of the padding inside it.
|
||||
static double get gutter => 14.w;
|
||||
|
||||
/// The air between one band and the next.
|
||||
static double get gap => 12.h;
|
||||
|
||||
/// The corner. Sections of a form, so a little tighter than a page-level
|
||||
/// panel — see [Narrative.radiusCard], which is the shape Home's cards take.
|
||||
static double get radius => Narrative.radiusInner;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -102,14 +114,16 @@ class MilerBand extends StatelessWidget {
|
||||
duration: DesignConstants.motionState,
|
||||
curve: Curves.easeOut,
|
||||
width: double.infinity,
|
||||
margin: EdgeInsets.symmetric(horizontal: gutter),
|
||||
padding: padding ?? EdgeInsets.symmetric(horizontal: pad, vertical: 16.h),
|
||||
decoration: BoxDecoration(
|
||||
color: color ?? ColorConstants.pureSurface,
|
||||
border: rail == null
|
||||
? null
|
||||
: Border(
|
||||
left: BorderSide(color: rail!, width: 3.w),
|
||||
),
|
||||
borderRadius: BorderRadius.circular(radius),
|
||||
// The hairline and the lift together, the same recipe every other card
|
||||
// in the app is built on — so a form section and a panel on Home read
|
||||
// as the same kind of object. See [Narrative.cardBox].
|
||||
border: Border.all(color: Narrative.cardBorder, width: 1),
|
||||
boxShadow: Narrative.cardShadow,
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
@@ -261,7 +275,7 @@ class PrimaryButton extends StatelessWidget {
|
||||
maxLines: 1,
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
),
|
||||
@@ -324,7 +338,7 @@ class SecondaryButton extends StatelessWidget {
|
||||
style: TextStyle(
|
||||
color: c,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
),
|
||||
@@ -370,7 +384,7 @@ class StatusChip extends StatelessWidget {
|
||||
style: TextStyle(
|
||||
color: color,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
),
|
||||
@@ -440,7 +454,7 @@ class SectionHeader extends StatelessWidget {
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.2,
|
||||
color: ColorConstants.onSurface,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
@@ -456,7 +470,7 @@ class SectionHeader extends StatelessWidget {
|
||||
action!,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: ColorConstants.primary,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -540,7 +554,7 @@ class InfoBanner extends StatelessWidget {
|
||||
color: color,
|
||||
fontSize: 13,
|
||||
height: 1.35,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
),
|
||||
@@ -722,7 +736,7 @@ class AppLoader extends StatelessWidget {
|
||||
label!,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: ColorConstants.onSurfaceVariant,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
),
|
||||
@@ -1629,7 +1643,7 @@ class MilerButton extends StatelessWidget {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: fontSize,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -0.1,
|
||||
color: fg,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
@@ -2042,7 +2056,7 @@ class StopSourceLine extends StatelessWidget {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 11.5,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -0.1,
|
||||
color: accent,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
@@ -2063,7 +2077,7 @@ class StopSourceLine extends StatelessWidget {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 11.5,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontWeight: FontWeight.w700,
|
||||
// Tabular, because these are read as codes and a column of
|
||||
// them down a list should line up.
|
||||
fontFeatures: const [FontFeature.tabularFigures()],
|
||||
@@ -2124,7 +2138,7 @@ class OrderStatusTag extends StatelessWidget {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 11.5,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -0.1,
|
||||
color: color,
|
||||
fontFamily: FontConstants.fontFamily,
|
||||
|
||||
Reference in New Issue
Block a user