선생님 대시보드 웹 타일 그리드 반응형으로 수정
웹(넓은 화면)에서 항상 2개씩 줄바꿈되던 버그 수정. 학생 대시보드와 동일하게 LayoutBuilder로 폭이 800 이상이면 한 줄에 5개, 좁으면 기존처럼 2개씩 보이도록 함. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -136,16 +136,19 @@ class _TeacherDashboardState extends State<TeacherDashboard> {
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// 📊 [그리드 레이아웃 메뉴] 시후의 카드 컴포넌트 스타일 적용
|
||||
// 🖥️ 데스크톱 브라우저에서 카드가 지나치게 커지지 않도록 최대 너비를 제한한다.
|
||||
Center(
|
||||
LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
// 🖥️ 웹(넓은 화면)은 한 줄에 5개씩, 폰(좁은 화면)은 기존 2개 그대로.
|
||||
final bool isWide = constraints.maxWidth >= 800;
|
||||
return Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 700),
|
||||
constraints: BoxConstraints(maxWidth: isWide ? 1300 : 700),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24.0),
|
||||
child: GridView.count(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
crossAxisCount: 2,
|
||||
crossAxisCount: isWide ? 5 : 2,
|
||||
crossAxisSpacing: 16,
|
||||
mainAxisSpacing: 16,
|
||||
childAspectRatio: 0.95,
|
||||
@@ -158,7 +161,8 @@ class _TeacherDashboardState extends State<TeacherDashboard> {
|
||||
onTap: () => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => const TeacherAttendancePage(),
|
||||
builder: (context) =>
|
||||
const TeacherAttendancePage(),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -192,6 +196,8 @@ class _TeacherDashboardState extends State<TeacherDashboard> {
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user