comunes/tane
1
0
Fork 0
Code Issues Pull requests Projects Releases 7 Packages Wiki Activity Actions

feat(ux): edge fades hint that filter rows scroll horizontally

Browse source 
Chips clipped at the viewport edge with no cue that more filters exist.
New reusable EdgeFade widget (ShaderMask + dstIn) fades an edge only
while content remains beyond it, driven by scroll metrics; RTL mirrors
via Directionality. Applied to the inventory filter bar, market filter
bar and calendar month strip.
This commit is contained in:
vjrj 2026-07-11 07:14:19 +02:00
parent a461106dbf
commit 4ebfdca2fd
5 changed files with 262 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

51
apps/app_seeds/lib/ui/calendar_screen.dart
View file

@ -8,6 +8,7 @@ import '../data/variety_repository.dart';
import '../domain/crop_calendar.dart';
import '../i18n/strings.g.dart';
import 'category_palette.dart';
import 'edge_fade.dart';
import 'theme.dart';
/// One crop-calendar phase as shown on the "this month" screen: its label,
@ -145,30 +146,32 @@ class _MonthStripState extends State<_MonthStrip> {
final fmt = DateFormat.MMM(locale.toLanguageTag());
return SizedBox(
height: 56,
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
itemCount: 12,
separatorBuilder: (_, _) => const SizedBox(width: 8),
itemBuilder: (context, i) {
final m = i + 1;
final selected = m == widget.month;
return ChoiceChip(
key: Key('calendar.month.$m'),
labelPadding: const EdgeInsets.symmetric(horizontal: 6),
label: Text(
_capitalise(fmt.format(DateTime(2000, m))),
key: selected ? _selectedKey : null,
),
selected: selected,
onSelected: (_) => widget.onSelect(m),
selectedColor: seedPrimaryContainer,
labelStyle: TextStyle(
color: selected ? seedOnPrimaryContainer : seedMuted,
fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
),
);
},
child: EdgeFade(
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
itemCount: 12,
separatorBuilder: (_, _) => const SizedBox(width: 8),
itemBuilder: (context, i) {
final m = i + 1;
final selected = m == widget.month;
return ChoiceChip(
key: Key('calendar.month.$m'),
labelPadding: const EdgeInsets.symmetric(horizontal: 6),
label: Text(
_capitalise(fmt.format(DateTime(2000, m))),
key: selected ? _selectedKey : null,
),
selected: selected,
onSelected: (_) => widget.onSelect(m),
selectedColor: seedPrimaryContainer,
labelStyle: TextStyle(
color: selected ? seedOnPrimaryContainer : seedMuted,
fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
),
);
},
),
),
);
}

82
apps/app_seeds/lib/ui/edge_fade.dart Normal file
View file

@ -0,0 +1,82 @@
import 'package:flutter/material.dart';
/// Fades the edges of a horizontal scrollable to transparency wherever more
/// content lies beyond that edge, so it is obvious the row scrolls.
///
/// Wrap directly around a horizontal [SingleChildScrollView] or [ListView].
/// The fade is a [ShaderMask] with [BlendMode.dstIn], so it melts into
/// whatever background sits behind — no theme colour involved. Edge state is
/// tracked per logical side (start/end) and mapped to physical left/right via
/// [Directionality], so RTL mirrors correctly.
class EdgeFade extends StatefulWidget {
const EdgeFade({super.key, required this.child, this.fadeWidth = 28});
/// The horizontal scrollable to mask.
final Widget child;
/// Width of each faded edge in logical pixels.
final double fadeWidth;
@override
State<EdgeFade> createState() => EdgeFadeState();
}
class EdgeFadeState extends State<EdgeFade> {
bool _fadeStart = false;
bool _fadeEnd = false;
/// Whether the physical left edge is currently faded.
@visibleForTesting
bool get fadeLeft => _isRtl ? _fadeEnd : _fadeStart;
/// Whether the physical right edge is currently faded.
@visibleForTesting
bool get fadeRight => _isRtl ? _fadeStart : _fadeEnd;
bool get _isRtl => Directionality.of(context) == TextDirection.rtl;
bool _onMetrics(ScrollMetrics metrics) {
if (metrics.axis != Axis.horizontal) return false;
final start = metrics.extentBefore > 0.5;
final end = metrics.extentAfter > 0.5;
if (start != _fadeStart || end != _fadeEnd) {
setState(() {
_fadeStart = start;
_fadeEnd = end;
});
}
return false;
}
@override
Widget build(BuildContext context) {
final fadeLeft = this.fadeLeft;
final fadeRight = this.fadeRight;
// The mask stays in the tree even when both edges are opaque: swapping it
// in and out would re-inflate the child and reset its scroll position.
return NotificationListener<ScrollMetricsNotification>(
onNotification: (n) => n.depth == 0 ? _onMetrics(n.metrics) : false,
child: NotificationListener<ScrollNotification>(
onNotification: (n) => n.depth == 0 ? _onMetrics(n.metrics) : false,
child: ShaderMask(
blendMode: BlendMode.dstIn,
shaderCallback: (bounds) {
final w = bounds.width > 0
? (widget.fadeWidth / bounds.width).clamp(0.0, 0.5)
: 0.0;
return LinearGradient(
colors: [
fadeLeft ? Colors.transparent : Colors.white,
Colors.white,
Colors.white,
fadeRight ? Colors.transparent : Colors.white,
],
stops: [0, w, 1 - w, 1],
).createShader(bounds);
},
child: widget.child,
),
),
);
}
}

11
apps/app_seeds/lib/ui/inventory_list_screen.dart
View file

@ -11,6 +11,7 @@ import '../services/share_catalog_service.dart';
import '../state/inventory_cubit.dart';
import 'category_palette.dart';
import 'draft_triage.dart';
import 'edge_fade.dart';
import 'label_print_sheet.dart';
import 'quantity_kind_l10n.dart';
import 'quantity_picker.dart';
@ -401,10 +402,12 @@ class _FilterBar extends StatelessWidget {
));
}
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Row(children: row),
return EdgeFade(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Row(children: row),
),
);
}
}

39
apps/app_seeds/lib/ui/market_screen.dart
View file

@ -12,6 +12,7 @@ import '../services/social_connection.dart';
import '../services/social_service.dart';
import '../services/social_settings.dart';
import '../state/offers_cubit.dart';
import 'edge_fade.dart';
import 'market_widgets.dart';
import 'theme.dart';
@ -514,24 +515,26 @@ class _MarketFilterBar extends StatelessWidget {
),
];
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: Row(
children: [
for (final chip in chips)
Padding(
padding: const EdgeInsetsDirectional.only(end: 8),
child: chip,
),
if (state.hasActiveFilter)
TextButton.icon(
key: const Key('market.filter.clear'),
onPressed: cubit.clearFilters,
icon: const Icon(Icons.clear, size: 18),
label: Text(t.inventory.clearFilters),
),
],
return EdgeFade(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: Row(
children: [
for (final chip in chips)
Padding(
padding: const EdgeInsetsDirectional.only(end: 8),
child: chip,
),
if (state.hasActiveFilter)
TextButton.icon(
key: const Key('market.filter.clear'),
onPressed: cubit.clearFilters,
icon: const Icon(Icons.clear, size: 18),
label: Text(t.inventory.clearFilters),
),
],
),
),
);
}