diff --git a/lib/widgets/collection/collection_grid.dart b/lib/widgets/collection/collection_grid.dart index 23417532b..f08d9b234 100644 --- a/lib/widgets/collection/collection_grid.dart +++ b/lib/widgets/collection/collection_grid.dart @@ -54,7 +54,7 @@ class _CollectionGridState extends State { settingsRouteKey: widget.settingsRouteKey ?? context.currentRouteName!, columnCountDefault: 4, extentMin: 46, - spacing: 0, + spacing: 2, ); return TileExtentControllerProvider( controller: _tileExtentController!, @@ -191,13 +191,12 @@ class _CollectionScaler extends StatelessWidget { scrollableKey: scrollableKey, appBarHeightNotifier: appBarHeightNotifier, gridBuilder: (center, extent, child) => CustomPaint( - // painting the thumbnail half-border on top of the grid yields artifacts, - // so we use a `foregroundPainter` to cover them instead - foregroundPainter: GridPainter( + painter: GridPainter( center: center, extent: extent, spacing: tileSpacing, - strokeWidth: DecoratedThumbnail.borderWidth * 2, + borderWidth: DecoratedThumbnail.borderWidth, + borderRadius: Radius.zero, color: DecoratedThumbnail.borderColor, ), child: child, diff --git a/lib/widgets/common/scaling.dart b/lib/widgets/common/scaling.dart index b1b7f58a6..67677b0b5 100644 --- a/lib/widgets/common/scaling.dart +++ b/lib/widgets/common/scaling.dart @@ -252,15 +252,16 @@ class _ScaleOverlayState extends State { class GridPainter extends CustomPainter { final Offset center; - final double extent, spacing; - final double strokeWidth; + final double extent, spacing, borderWidth; + final Radius borderRadius; final Color color; const GridPainter({ required this.center, required this.extent, - this.spacing = 0.0, - this.strokeWidth = 1.0, + required this.spacing, + required this.borderWidth, + required this.borderRadius, required this.color, }); @@ -268,7 +269,8 @@ class GridPainter extends CustomPainter { void paint(Canvas canvas, Size size) { final radius = extent * 3; final paint = Paint() - ..strokeWidth = strokeWidth + ..style = PaintingStyle.stroke + ..strokeWidth = borderWidth ..shader = ui.Gradient.radial( center, radius, @@ -281,18 +283,26 @@ class GridPainter extends CustomPainter { 1, ], ); - void draw(Offset topLeft) { - for (var i = -1; i <= 2; i++) { - final ref = (extent + spacing) * i; - canvas.drawLine(Offset(0, topLeft.dy + ref), Offset(size.width, topLeft.dy + ref), paint); - canvas.drawLine(Offset(topLeft.dx + ref, 0), Offset(topLeft.dx + ref, size.height), paint); - } - } - final topLeft = center.translate(-extent / 2, -extent / 2); - draw(topLeft); - if (spacing > 0) { - draw(topLeft.translate(-spacing, -spacing)); + // final topLeft = center.translate(-extent / 2, -extent / 2); + final delta = extent + spacing; + for (var i = -2; i <= 2; i++) { + final dx = delta * i; + for (var j = -2; j <= 2; j++) { + if (i == 0 && j == 0) continue; + final dy = delta * j; + canvas.drawRRect( + RRect.fromRectAndRadius( + Rect.fromCenter( + center: center + Offset(dx, dy), + width: extent, + height: extent, + ), + borderRadius, + ), + paint, + ); + } } } diff --git a/lib/widgets/filter_grids/common/decorated_filter_chip.dart b/lib/widgets/filter_grids/common/decorated_filter_chip.dart index 5b0a4ecdd..7461a3f55 100644 --- a/lib/widgets/filter_grids/common/decorated_filter_chip.dart +++ b/lib/widgets/filter_grids/common/decorated_filter_chip.dart @@ -77,6 +77,8 @@ class DecoratedFilterChip extends StatelessWidget { ); } + static Radius radius(double extent) => Radius.circular(min(AvesFilterChip.defaultRadius, extent / 4)); + Widget _buildChip(CollectionSource source) { final entry = coverEntry ?? source.coverEntry(filter); final backgroundImage = entry == null @@ -90,9 +92,8 @@ class DecoratedFilterChip extends StatelessWidget { entry: entry, extent: extent, ); - final radius = min(AvesFilterChip.defaultRadius, extent / 4); final titlePadding = min(4.0, extent / 32); - final borderRadius = BorderRadius.circular(radius); + final borderRadius = BorderRadius.all(radius(extent)); Widget child = AvesFilterChip( filter: filter, showGenericIcon: false, diff --git a/lib/widgets/filter_grids/common/filter_grid_page.dart b/lib/widgets/filter_grids/common/filter_grid_page.dart index f0eb9a3ba..e48784b28 100644 --- a/lib/widgets/filter_grids/common/filter_grid_page.dart +++ b/lib/widgets/filter_grids/common/filter_grid_page.dart @@ -380,6 +380,8 @@ class _FilterScaler extends StatelessWidget { center: center, extent: extent, spacing: tileSpacing, + borderWidth: AvesFilterChip.outlineWidth, + borderRadius: DecoratedFilterChip.radius(extent), color: Colors.grey.shade700, ), child: child,