대시보드 타일 그리드 여백 확보 - 4열 고정 + 크기 20% 축소
- 화면이 넓어져도 열 개수를 6개까지 늘리지 않고 4열에서 고정 - 그리드 캔버스 자체 너비를 700px로 제한하고 20% 더 줄여서, 타일이 화면을 꽉 채우는 느낌 대신 가운데에 여백을 두고 정갈하게 보이게 함 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+28
-17
@@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user