Collapse chart time-range pills to a dropdown on phones

The device detail chart's time-range selector (Today / Last week / ...)
rendered as a SegmentedButton that overflowed on narrow phone layouts.
Reuse the responsive FilterSelector widget so the same control is used
for both the list filters and the chart: segmented pills on wide layouts,
a compact dropdown combo box on phones.

To keep the two controls consistent, FilterSelector now renders a
SegmentedButton (instead of ChoiceChips) on wide layouts.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rzuasti
2026-06-05 19:29:38 -04:00
co-authored by Claude Opus 4.8
parent 4bbaa6d3e1
commit b3a4e4cb0b
4 changed files with 34 additions and 41 deletions
+10 -5
View File
@@ -23,7 +23,9 @@ Widget _harness({
}
void main() {
testWidgets('wide layout shows chips and reports selection', (tester) async {
testWidgets('wide layout shows segmented pills and reports selection', (
tester,
) async {
String? picked;
await tester.pumpWidget(
_harness(
@@ -33,9 +35,12 @@ void main() {
),
);
// All three options are visible as chips at once.
expect(find.byType(ChoiceChip), findsNWidgets(3));
// All three options are visible as segments at once.
expect(find.byType(SegmentedButton<String>), findsOneWidget);
expect(find.byType(PopupMenuButton<String>), findsNothing);
expect(find.text('New'), findsOneWidget);
expect(find.text('Old'), findsOneWidget);
expect(find.text('All'), findsOneWidget);
await tester.tap(find.text('Old'));
expect(picked, 'Old');
@@ -51,8 +56,8 @@ void main() {
),
);
// Collapsed: no chips, a single button showing the current selection.
expect(find.byType(ChoiceChip), findsNothing);
// Collapsed: no segmented pills, a single button showing the selection.
expect(find.byType(SegmentedButton<String>), findsNothing);
expect(find.byType(PopupMenuButton<String>), findsOneWidget);
expect(find.text('New'), findsOneWidget);
expect(find.text('Old'), findsNothing);