대시보드 타일 그리드 여백 확보 - 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( child: LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
final double width = constraints.maxWidth; final double width = constraints.maxWidth;
// 🔲 정사각형 1칸 기준 4×3 배치 — 화면이 넓어도 6칸까지 늘리지 않고 4칸에서 멈춘다.
final int crossAxisCount = width < 420 final int crossAxisCount = width < 420
? 2 ? 2
: width < 700 : width < 700
? 3 ? 3
: width < 1000 : 4;
? 4 // 📏 캔버스 자체를 700px에서 더 넓어지지 않게 막고, 타일 크기를 전체적으로
: 6; // 20% 줄여서 화면이 꽉 차 보이지 않고 여백이 생기게 한다.
const double maxGridWidth = 700;
final double cappedWidth = width < maxGridWidth
? width
: maxGridWidth;
final double gridWidth = cappedWidth * 0.8;
return StaggeredGrid.count( return Center(
crossAxisCount: crossAxisCount, child: SizedBox(
mainAxisSpacing: 12, width: gridWidth,
crossAxisSpacing: 12, child: StaggeredGrid.count(
children: [ crossAxisCount: crossAxisCount,
for (final tile in tiles) mainAxisSpacing: 12,
StaggeredGridTile.count( crossAxisSpacing: 12,
crossAxisCellCount: _spanFor( children: [
tile.id, for (final tile in tiles)
).$1.clamp(1, crossAxisCount), StaggeredGridTile.count(
mainAxisCellCount: _spanFor(tile.id).$2, crossAxisCellCount: _spanFor(
child: tile.child, tile.id,
), ).$1.clamp(1, crossAxisCount),
], mainAxisCellCount: _spanFor(tile.id).$2,
child: tile.child,
),
],
),
),
); );
}, },
), ),