[Flutter] 스크롤 가능 페이지에서 내용이 짧을 때 하단을 하얀색으로 채우는 방법

문제 상황

Flutter 앱을 개발하다 보면 다음과 같은 UI 문제를 마주칠 수 있습니다:

• SingleChildScrollView를 사용한 화면에서 내용이 짧을 때
• 배경색이 회색(surfaceE9E9E9)인 경우
• 하단에 회색 배경이 노출되어 시각적으로 불편함

특히 FAQ 상세 페이지나 정보성 페이지에서 이런 문제가 자주 발생합니다.

해결 방법

이 문제를 해결하기 위해서는 SingleChildScrollView 대신 CustomScrollView와 SliverFillRemaining을 사용해야 합니다.

기존 코드 (문제가 있는 코드)

Scaffold(
  backgroundColor: PsxColors.surfaceE9E9E9,
  body: SingleChildScrollView(
    child: ConstrainedBox(
      constraints: BoxConstraints(
        minHeight: MediaQuery.of(context).size.height -
                   kToolbarHeight -
                   MediaQuery.of(context).padding.top,
      ),
      child: Column(
        children: [
          Container(
            color: PsxColors.surfaceFFFFFF,
            child: // 내용
          ),
        ],
      ),
    ),
  ),
)

이 방법의 문제점:

• SingleChildScrollView 내부에서는 Expanded 위젯을 사용할 수 없음
• ConstrainedBox만으로는 남은 공간을 하얀색으로 채우기 어려움
• 내용이 짧을 때 하단에 회색 배경이 노출됨

개선된 코드

Scaffold(
  backgroundColor: PsxColors.surfaceE9E9E9,
  body: CustomScrollView(
    slivers: [
      // 메인 내용
      SliverToBoxAdapter(
        child: Container(
          color: PsxColors.surfaceFFFFFF,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ContainerEtcTitle(
                title: logic.qna!.question,
              ),
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 16.0,
                  vertical: 20.0,
                ),
                margin: EdgeInsets.only(bottom: 40),
                child: StylingHTML(data: logic.qna?.answer ?? ''),
              ),
            ],
          ),
        ),
      ),
      // 조건부 내용 (연관 질문 등)
      if (logic.qna?.relatedQnas != null &&
          logic.qna?.relatedQnas?.isNotEmpty == true)
        SliverToBoxAdapter(
          child: buildRelatedQnas(),
        ),
      // 남은 공간을 하얀색으로 채움
      SliverFillRemaining(
        hasScrollBody: false,
        child: Container(
          color: PsxColors.surfaceFFFFFF,
          width: double.infinity,
        ),
      ),
    ],
  ),
)

주요 포인트

1. CustomScrollView 사용

SingleChildScrollView는 단일 자식만 가질 수 있어 복잡한 레이아웃 제어가 어렵습니다. 반면 CustomScrollView는 여러 Sliver 위젯을 조합하여 더 유연한 레이아웃을 만들 수 있습니다.

2. SliverToBoxAdapter

일반 위젯을 Sliver로 변환할 때 사용합니다. 기존의 Column, Container 등을 그대로 사용하면서 CustomScrollView에 포함시킬 수 있습니다.

3. SliverFillRemaining

이 위젯이 핵심입니다:

• hasScrollBody: false: 스크롤이 필요하지 않을 때 남은 공간을 모두 채웁니다
• 내용이 짧으면: 남은 공간을 하얀색으로 채움
• 내용이 길면: 스크롤 가능한 영역으로 동작

4. 관련 위젯도 하얀색 배경 적용

연관 질문 섹션 등 추가 위젯도 하얀색 배경을 가지도록 설정해야 시각적 일관성을 유지할 수 있습니다.

Widget buildRelatedQnas() {
  return Container(
    color: PsxColors.surfaceFFFFFF,  // 하얀색 배경 추가
    child: Column(
      // ...
    ),
  );
}

결과

이 방법을 적용하면:

• ✅ 내용이 짧을 때: 하단이 하얀색으로 채워짐
• ✅ 내용이 길 때: 정상적으로 스크롤됨
• ✅ 시각적으로 깔끔한 UI 유지
• ✅ 다양한 화면 크기에 대응 가능

추가 팁

다른 접근 방법들 (시도했지만 실패한 방법들)

1. Expanded 사용: SingleChildScrollView 내부에서는 사용 불가
2. 고정 높이 Container: 내용이 길 때 문제 발생
3. IntrinsicHeight + Expanded: SingleChildScrollView와 호환되지 않음

따라서 CustomScrollView + SliverFillRemaining 조합이 가장 안정적인 해결책입니다.

결론

Flutter에서 스크롤 가능한 화면의 하단을 특정 색상으로 채우려면 CustomScrollView와 SliverFillRemaining을 활용하는 것이 가장 효과적입니다. 이 방법은 단순하면서도 다양한 상황에 대응할 수 있는 강력한 해결책입니다.