changed scaling grid style to match content
This commit is contained in:
parent
b539597c62
commit
d0fe4ee1c3
4 changed files with 35 additions and 23 deletions
|
@ -54,7 +54,7 @@ class _CollectionGridState extends State<CollectionGrid> {
|
||||||
settingsRouteKey: widget.settingsRouteKey ?? context.currentRouteName!,
|
settingsRouteKey: widget.settingsRouteKey ?? context.currentRouteName!,
|
||||||
columnCountDefault: 4,
|
columnCountDefault: 4,
|
||||||
extentMin: 46,
|
extentMin: 46,
|
||||||
spacing: 0,
|
spacing: 2,
|
||||||
);
|
);
|
||||||
return TileExtentControllerProvider(
|
return TileExtentControllerProvider(
|
||||||
controller: _tileExtentController!,
|
controller: _tileExtentController!,
|
||||||
|
@ -191,13 +191,12 @@ class _CollectionScaler extends StatelessWidget {
|
||||||
scrollableKey: scrollableKey,
|
scrollableKey: scrollableKey,
|
||||||
appBarHeightNotifier: appBarHeightNotifier,
|
appBarHeightNotifier: appBarHeightNotifier,
|
||||||
gridBuilder: (center, extent, child) => CustomPaint(
|
gridBuilder: (center, extent, child) => CustomPaint(
|
||||||
// painting the thumbnail half-border on top of the grid yields artifacts,
|
painter: GridPainter(
|
||||||
// so we use a `foregroundPainter` to cover them instead
|
|
||||||
foregroundPainter: GridPainter(
|
|
||||||
center: center,
|
center: center,
|
||||||
extent: extent,
|
extent: extent,
|
||||||
spacing: tileSpacing,
|
spacing: tileSpacing,
|
||||||
strokeWidth: DecoratedThumbnail.borderWidth * 2,
|
borderWidth: DecoratedThumbnail.borderWidth,
|
||||||
|
borderRadius: Radius.zero,
|
||||||
color: DecoratedThumbnail.borderColor,
|
color: DecoratedThumbnail.borderColor,
|
||||||
),
|
),
|
||||||
child: child,
|
child: child,
|
||||||
|
|
|
@ -252,15 +252,16 @@ class _ScaleOverlayState extends State<ScaleOverlay> {
|
||||||
|
|
||||||
class GridPainter extends CustomPainter {
|
class GridPainter extends CustomPainter {
|
||||||
final Offset center;
|
final Offset center;
|
||||||
final double extent, spacing;
|
final double extent, spacing, borderWidth;
|
||||||
final double strokeWidth;
|
final Radius borderRadius;
|
||||||
final Color color;
|
final Color color;
|
||||||
|
|
||||||
const GridPainter({
|
const GridPainter({
|
||||||
required this.center,
|
required this.center,
|
||||||
required this.extent,
|
required this.extent,
|
||||||
this.spacing = 0.0,
|
required this.spacing,
|
||||||
this.strokeWidth = 1.0,
|
required this.borderWidth,
|
||||||
|
required this.borderRadius,
|
||||||
required this.color,
|
required this.color,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -268,7 +269,8 @@ class GridPainter extends CustomPainter {
|
||||||
void paint(Canvas canvas, Size size) {
|
void paint(Canvas canvas, Size size) {
|
||||||
final radius = extent * 3;
|
final radius = extent * 3;
|
||||||
final paint = Paint()
|
final paint = Paint()
|
||||||
..strokeWidth = strokeWidth
|
..style = PaintingStyle.stroke
|
||||||
|
..strokeWidth = borderWidth
|
||||||
..shader = ui.Gradient.radial(
|
..shader = ui.Gradient.radial(
|
||||||
center,
|
center,
|
||||||
radius,
|
radius,
|
||||||
|
@ -281,18 +283,26 @@ class GridPainter extends CustomPainter {
|
||||||
1,
|
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);
|
// final topLeft = center.translate(-extent / 2, -extent / 2);
|
||||||
draw(topLeft);
|
final delta = extent + spacing;
|
||||||
if (spacing > 0) {
|
for (var i = -2; i <= 2; i++) {
|
||||||
draw(topLeft.translate(-spacing, -spacing));
|
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,
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -77,6 +77,8 @@ class DecoratedFilterChip extends StatelessWidget {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static Radius radius(double extent) => Radius.circular(min<double>(AvesFilterChip.defaultRadius, extent / 4));
|
||||||
|
|
||||||
Widget _buildChip(CollectionSource source) {
|
Widget _buildChip(CollectionSource source) {
|
||||||
final entry = coverEntry ?? source.coverEntry(filter);
|
final entry = coverEntry ?? source.coverEntry(filter);
|
||||||
final backgroundImage = entry == null
|
final backgroundImage = entry == null
|
||||||
|
@ -90,9 +92,8 @@ class DecoratedFilterChip extends StatelessWidget {
|
||||||
entry: entry,
|
entry: entry,
|
||||||
extent: extent,
|
extent: extent,
|
||||||
);
|
);
|
||||||
final radius = min<double>(AvesFilterChip.defaultRadius, extent / 4);
|
|
||||||
final titlePadding = min<double>(4.0, extent / 32);
|
final titlePadding = min<double>(4.0, extent / 32);
|
||||||
final borderRadius = BorderRadius.circular(radius);
|
final borderRadius = BorderRadius.all(radius(extent));
|
||||||
Widget child = AvesFilterChip(
|
Widget child = AvesFilterChip(
|
||||||
filter: filter,
|
filter: filter,
|
||||||
showGenericIcon: false,
|
showGenericIcon: false,
|
||||||
|
|
|
@ -380,6 +380,8 @@ class _FilterScaler<T extends CollectionFilter> extends StatelessWidget {
|
||||||
center: center,
|
center: center,
|
||||||
extent: extent,
|
extent: extent,
|
||||||
spacing: tileSpacing,
|
spacing: tileSpacing,
|
||||||
|
borderWidth: AvesFilterChip.outlineWidth,
|
||||||
|
borderRadius: DecoratedFilterChip.radius(extent),
|
||||||
color: Colors.grey.shade700,
|
color: Colors.grey.shade700,
|
||||||
),
|
),
|
||||||
child: child,
|
child: child,
|
||||||
|
|
Loading…
Reference in a new issue