대시보드 타일 그리드 여백 확보 - 4열 고정 + 크기 20% 축소

- 화면이 넓어져도 열 개수를 6개까지 늘리지 않고 4열에서 고정
- 그리드 캔버스 자체 너비를 700px로 제한하고 20% 더 줄여서, 타일이
  화면을 꽉 채우는 느낌 대신 가운데에 여백을 두고 정갈하게 보이게 함

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-07 23:59:59 +09:00
co-authored by Claude Sonnet 5
parent 79938898a0
commit 73542fa11c
+28 -17
View File
@@ -629,28 +629,39 @@ class _MainDashboardState extends State<MainDashboard> {
child: LayoutBuilder(
builder: (context, constraints) {
final double width = constraints.maxWidth;
// 🔲 정사각형 1칸 기준 4×3 배치 — 화면이 넓어도 6칸까지 늘리지 않고 4칸에서 멈춘다.
final int crossAxisCount = width < 420
? 2
: width < 700
? 3
: width < 1000
? 4
: 6;
: 4;
// 📏 캔버스 자체를 700px에서 더 넓어지지 않게 막고, 타일 크기를 전체적으로
// 20% 줄여서 화면이 꽉 차 보이지 않고 여백이 생기게 한다.
const double maxGridWidth = 700;
final double cappedWidth = width < maxGridWidth
? width
: maxGridWidth;
final double gridWidth = cappedWidth * 0.8;
return StaggeredGrid.count(
crossAxisCount: crossAxisCount,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
children: [
for (final tile in tiles)
StaggeredGridTile.count(
crossAxisCellCount: _spanFor(
tile.id,
).$1.clamp(1, crossAxisCount),
mainAxisCellCount: _spanFor(tile.id).$2,
child: tile.child,
),
],
return Center(
child: SizedBox(
width: gridWidth,
child: StaggeredGrid.count(
crossAxisCount: crossAxisCount,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
children: [
for (final tile in tiles)
StaggeredGridTile.count(
crossAxisCellCount: _spanFor(
tile.id,
).$1.clamp(1, crossAxisCount),
mainAxisCellCount: _spanFor(tile.id).$2,
child: tile.child,
),
],
),
),
);
},
),