인디케이터와 버튼 사이 간격이 조정되지 않는 이슈

😭  인디케이터와 버튼 사이 간격이 조정되지 않는 이슈

 

Flutter의 PageView와 SmoothPageIndicator를 사용하여 온보딩 화면을 구현하던 중, 인디케이터와 버튼 사이의 간격을 줄이려고 해도 변경되지 않는 문제가 발생했다.

• Padding.only(bottom: 2)로 설정해도 간격이 줄어들지 않음.
• SafeArea를 감싸는 방식 변경에도 변화 없음.
• Column 내부 여백이 자동으로 추가되는 것으로 보임.

---

🔍 원인 분석: Flutter의 Column 배치 방식과 SafeArea의 영향

1. Column의 기본적인 배치 방식

Column(
  children: [
    Expanded(child: PageView(...)), // ✅ PageView가 확장됨
    _buildPageIndicator(),  // ❌ 여백이 자동으로 추가됨
    SafeArea(child: _buildBottomButtons()), // ❌ SafeArea가 추가 패딩 적용
  ],
);

Flutter의 Column은 기본적으로 최대한의 공간을 차지하려는 성질이 있다.
즉, mainAxisSize: MainAxisSize.max가 기본값이므로 내부 위젯들 사이에 불필요한 여백이 자동 추가될 수 있다.

 

 

2. SafeArea가 불필요한 패딩을 추가

SafeArea(
  child: Column(
    children: [
      _buildPageIndicator(),
      _buildBottomButtons(),
    ],
  ),
);

SafeArea는 기본적으로 소프트 키보드, 네비게이션 바, 상태 바 등을 고려하여 추가적인 padding을 적용한다.
이때, SafeArea가 전체 Column을 감싸고 있으면 불필요한 여백이 생기게 된다.

 

3. PageView의 Expanded 사용으로 인해 하단 요소가 밀려나는 문제

Column(
  children: [
    Expanded(child: PageView(...)), // ✅ PageView가 최대한 확장됨
    _buildPageIndicator(),  // ❌ PageView가 확장되면서 하단 요소가 밀려남
    _buildBottomButtons(),
  ],
);

Expanded(child: PageView(...))를 사용하면 PageView가 가능한 모든 공간을 차지하려고 하면서, 하단 인디케이터와 버튼이 자동으로 밀려나버림.

---

mainAxisSize 란?

MainAixSize는 Cloumn/Row 위젯에서 메인축의 크기를 결정하는 속성이다. 

 

Column(
  mainAxisSize: MainAxisSize.max, // 기본값이므로 설정하지 않아도 Max
  children: [
    Container(height: 300, color: Colors.red),
    Container(height: 300, color: Colors.blue),
  ],
),

부모가 Scaffold라면, Column은 전체 화면 높이를 차지 (896px 기준).
→ Container 두 개의 합은 600px이지만, 남은 공간도 차지하여 총 896px이 됨.

 

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(height: 300, color: Colors.red),
    Container(height: 300, color: Colors.blue),
  ],
),

Column의 높이는 600px로 제한됨.
→ Scaffold의 전체 높이(896px)가 있더라도 Column은 자식 위젯들의 높이(600px)만큼만 차지.

→ min을 설정하면 최소 크기(min)를 사용하면 자식 위젯들의 크기에 맞게 Column/Row가 축소됨

---

✅ 해결된 코드

Column(
  children: [
    Expanded(
      child: PageView(
        controller: pageController,
        onPageChanged: (index) {
          context.read<OnboardingCubit>().changePage(index);
        },
        children: const [
          OnboardingPage(title: "훈련 관리를 한 번에", description: "훈련 계획부터 스케줄 관리까지"),
          OnboardingPage(title: "출결 관리도 간편하게", description: "출석 현황 관리부터 회원 정보 확인까지"),
          OnboardingPage(title: "AI로 분석하는 훈련 현황", description: "참여 만족도부터 훈련 현황까지"),
          OnboardingPage(title: "맞춤형 훈련 노트", description: "훈련 동작별 관리부터 시퀀스 구성까지"),
          OnboardingPage(title: "Your Play\nYour Story", description: ""),
        ],
      ),
    ),
    SafeArea(
      child: Column(
        mainAxisSize: MainAxisSize.min, // ✅ 불필요한 여백 방지
        children: [
          _buildPageIndicator(pageController), // ✅ 인디케이터와 버튼을 하나의 Column으로 묶음
          _buildBottomButtons(context),
        ],
      ),
    ),
  ],
);

✅ Column의 mainAxisSize: MainAxisSize.min을 설정하여 불필요한 여백을 제거

• 기본적으로 Column은 mainAxisSize: MainAxisSize.max이며, 이로 인해 자동 여백이 추가될 수 있음.

✅ SafeArea는 하단 버튼만 감싸도록 조정

• SafeArea가 전체 Column을 감싸면 추가적인 padding이 발생할 가능성이 높음.

✅ PageView를 Expanded 대신 Flexible로 감싸 하단 요소가 밀려나는 현상 방지

• Expanded는 가능한 모든 공간을 차지하려 하지만, Flexible은 적절한 공간만 차지하도록 제한.

---

✅ UI 배치 이슈가 발생하면 아래 사항을 먼저 체크하자!

• Column 내부에서 불필요한 여백이 추가되지 않는지 확인 (mainAxisSize: MainAxisSize.min 적용)
• SafeArea가 불필요한 padding을 추가하고 있지 않은지 확인
• PageView가 Expanded로 인해 하단 요소를 밀어내고 있지 않은지 확인
• Padding이 의도한 값보다 크게 적용되어 있는지 확인