#277 filter chip max width depends on window width

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file.
 - Search: `on this day` and month filters in date filter section
 - Stats: histogram and contextual date filters
 - Screen saver
+- Widget: photo frame
 
 ### Changed
 

lib/widgets/collection/filter_bar.dart

@@ -4,6 +4,7 @@ import 'package:aves/widgets/common/identity/aves_filter_chip.dart';
 import 'package:flutter/material.dart';
 
 class FilterBar extends StatefulWidget {
+  static const EdgeInsets chipPadding = EdgeInsets.symmetric(horizontal: 4);
   static const double verticalPadding = 16;
   static const double preferredHeight = AvesFilterChip.minChipHeight + verticalPadding;
 
@@ -88,7 +89,7 @@ class _FilterBarState extends State<FilterBar> {
           key: _animatedListKey,
           initialItemCount: widget.filters.length,
           scrollDirection: Axis.horizontal,
-          padding: const EdgeInsets.symmetric(horizontal: 4),
+          padding: FilterBar.chipPadding,
           itemBuilder: (context, index, animation) {
             if (index >= widget.filters.length) return const SizedBox();
             return _buildChip(widget.filters.toList()[index]);
@@ -100,7 +101,7 @@ class _FilterBarState extends State<FilterBar> {
 
   Padding _buildChip(CollectionFilter filter) {
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 4),
+      padding: FilterBar.chipPadding,
       child: Center(
         child: AvesFilterChip(
           key: ValueKey(filter),

lib/widgets/common/identity/aves_filter_chip.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:math';
 
 import 'package:aves/app_mode.dart';
 import 'package:aves/model/actions/chip_actions.dart';
@@ -12,6 +13,7 @@ import 'package:aves/model/settings/settings.dart';
 import 'package:aves/theme/colors.dart';
 import 'package:aves/theme/durations.dart';
 import 'package:aves/theme/icons.dart';
+import 'package:aves/widgets/collection/filter_bar.dart';
 import 'package:aves/widgets/common/basic/menu.dart';
 import 'package:aves/widgets/common/providers/media_query_data_provider.dart';
 import 'package:aves/widgets/filter_grids/common/action_delegates/chip.dart';
@@ -45,7 +47,8 @@ class AvesFilterChip extends StatefulWidget {
   final AvesFilterDecoration? decoration;
   final String? banner;
   final Widget? leadingOverride, details;
-  final double padding, maxWidth;
+  final double padding;
+  final double? maxWidth;
   final HeroType heroType;
   final FilterCallback? onTap;
   final OffsetFilterCallback? onLongPress;
@@ -54,7 +57,6 @@ class AvesFilterChip extends StatefulWidget {
   static const double outlineWidth = 2;
   static const double minChipHeight = kMinInteractiveDimension;
   static const double minChipWidth = 80;
-  static const double defaultMaxChipWidth = 160;
   static const double iconSize = 18;
   static const double fontSize = 14;
   static const double decoratedContentVerticalPadding = 5;
@@ -71,7 +73,7 @@ class AvesFilterChip extends StatefulWidget {
     this.leadingOverride,
     this.details,
     this.padding = 6.0,
-    this.maxWidth = defaultMaxChipWidth,
+    this.maxWidth,
     this.heroType = HeroType.onTap,
     this.onTap,
     this.onLongPress = showDefaultLongPressMenu,
@@ -261,7 +263,14 @@ class _AvesFilterChipState extends State<AvesFilterChip> {
     Widget chip = Container(
       constraints: BoxConstraints(
         minWidth: AvesFilterChip.minChipWidth,
-        maxWidth: widget.maxWidth,
+        maxWidth: max(
+            AvesFilterChip.minChipWidth,
+            widget.maxWidth ??
+                context.select<MediaQueryData, double>((mq) {
+                  const minChipPerRow = 2;
+                  final padding = FilterBar.chipPadding.horizontal;
+                  return (mq.size.width - mq.padding.horizontal - padding * (minChipPerRow + 1)) / minChipPerRow;
+                })),
         minHeight: AvesFilterChip.minChipHeight,
       ),
       child: Stack(

lib/widgets/common/search/page.dart

@@ -3,6 +3,7 @@ import 'dart:ui';
 import 'package:aves/theme/durations.dart';
 import 'package:aves/utils/debouncer.dart';
 import 'package:aves/widgets/common/identity/aves_app_bar.dart';
+import 'package:aves/widgets/common/providers/media_query_data_provider.dart';
 import 'package:aves/widgets/common/search/delegate.dart';
 import 'package:aves/widgets/common/search/route.dart';
 import 'package:flutter/material.dart';
@@ -115,37 +116,39 @@ class _SearchPageState extends State<SearchPage> {
       case null:
         break;
     }
-    return Scaffold(
+    return MediaQueryDataProvider(
-      appBar: AppBar(
+      child: Scaffold(
-        leading: Hero(
+        appBar: AppBar(
-          tag: AvesAppBar.leadingHeroTag,
+          leading: Hero(
-          transitionOnUserGestures: true,
+            tag: AvesAppBar.leadingHeroTag,
-          child: Center(child: widget.delegate.buildLeading(context)),
+            transitionOnUserGestures: true,
-        ),
+            child: Center(child: widget.delegate.buildLeading(context)),
-        title: Hero(
+          ),
-          tag: AvesAppBar.titleHeroTag,
+          title: Hero(
-          transitionOnUserGestures: true,
+            tag: AvesAppBar.titleHeroTag,
-          child: DefaultTextStyle.merge(
+            transitionOnUserGestures: true,
-            style: const TextStyle(fontFeatures: [FontFeature.disable('smcp')]),
+            child: DefaultTextStyle.merge(
-            child: TextField(
+              style: const TextStyle(fontFeatures: [FontFeature.disable('smcp')]),
-              controller: widget.delegate.queryTextController,
+              child: TextField(
-              focusNode: _focusNode,
+                controller: widget.delegate.queryTextController,
-              decoration: InputDecoration(
+                focusNode: _focusNode,
-                border: InputBorder.none,
+                decoration: InputDecoration(
-                hintText: widget.delegate.searchFieldLabel,
+                  border: InputBorder.none,
-                hintStyle: theme.inputDecorationTheme.hintStyle,
+                  hintText: widget.delegate.searchFieldLabel,
+                  hintStyle: theme.inputDecorationTheme.hintStyle,
+                ),
+                textInputAction: TextInputAction.search,
+                style: theme.textTheme.headline6,
+                onSubmitted: (_) => widget.delegate.showResults(context),
               ),
-              textInputAction: TextInputAction.search,
-              style: theme.textTheme.headline6,
-              onSubmitted: (_) => widget.delegate.showResults(context),
             ),
           ),
+          actions: widget.delegate.buildActions(context),
+        ),
+        body: AnimatedSwitcher(
+          duration: const Duration(milliseconds: 300),
+          child: body,
         ),
-        actions: widget.delegate.buildActions(context),
-      ),
-      body: AnimatedSwitcher(
-        duration: const Duration(milliseconds: 300),
-        child: body,
       ),
     );
   }

lib/widgets/stats/filter_table.dart

@@ -26,7 +26,7 @@ class FilterTable<T extends Comparable> extends StatelessWidget {
     required this.onFilterSelection,
   });
 
-  static const chipWidth = AvesFilterChip.defaultMaxChipWidth;
+  static const chipWidth = 160.0;
   static const countWidth = 32.0;
   static const percentIndicatorMinWidth = 80.0;