[Flutter] Stack 위젯의 크기 결정 방식 이해하기

개요

최근에 플러터 Stack 관련된 오류를 심하게 겪었다.
아무래도 그동안 Stack에 대한 이해도가 낮아서 그런지 빠르게 문제해결을 하는데 어려움을 겪은 것 같다.
그래서 Stack의 기본 원리와 구조를 찾아보게 되었고, 내 나름대로 개념과 예시를 정리하게 되었다.

# Flutter Stack 위젯의 크기 결정 방식 이해하기

Flutter에서 Stack은 여러 위젯을 겹쳐서 배치할 수 있게 해주는 레이아웃 위젯이다. Stack이 어떻게 자신의 크기를 결정하는지 자세히 알아보자.

Stack의 기본 원리

Stack의 크기는 기본적으로 non-positioned 자식들에 의해 결정된다. 이때 non-positioned 자식들이 있다면, Positioned가 적용된 자식들은 Stack의 크기 결정에 영향을 주지 않고 Stack 안에서의 위치를 지정하게 된다.

1. 기본적인 예시 (Positioned & non-positioned)

Stack(
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Positioned(
      top: 10,
      left: 10,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.red,
      ),
    ),
  ],
)

이 경우 Stack의 크기는 파란색 Container(100x100)에 의해 결정된다. 빨간색 Container는 Positioned로 감싸져 있어서 크기 결정에 영향을 주지 않는다.

 

2. non-positioned 자식만 있는 경우

Stack(
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Container(
      width: 150,
      height: 80,
      color: Colors.green,
    ),
    Container(
        width: 200,
        height: 50,
        color: Colors.red,
    ),
  ],
)

이 경우 Stack은 non-positioned 자식들 중 가장 큰 크기를 기준으로 삼는다.

• 너비: 200 (빨간색 Container)
• 높이: 100 (파란색 Container)

3. Positioned 자식만 있는 경우

Stack(
  children: [
    Positioned(
      top: 0,
      left: 0,
      width: 100,
      height: 100,
      child: Container(color: Colors.blue),
    ),
  ],
)

이 경우에는 Stack이 기준으로 삼을 non-positioned 위젯이 없으므로 Stack의 크기는 부모 위젯의 크기에 따라 결정된다. 만약 부모 위젯도 Listview 같은 위젯으로 되어있다면 hasSize 오류가 발생할 것이다.

4. fit 속성 활용하기

Stack의 fit 속성을 사용하면 non-positioned 자식들의 크기를 조절할 수 있다.

Stack(
  fit: StackFit.expand, // 자식을 Stack 크기에 맞춰 확장
  children: [
    Container(color: Colors.blue),
    Positioned(
      top: 10,
      left: 10,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.red,
      ),
    ),
  ],
)

fit 속성의 종류:

• loose: 기본값, 자식이 원하는 크기대로
• expand: 가능한 최대 크기로 확장
• passthrough: 부모의 제약조건을 그대로 전달

 

5. 실전 활용 예시: 오버레이 효과

이미지 위에 그라데이션 오버레이를 넣는 경우

Stack(
  children: [
    Image.asset(
      'assets/background.jpg',
      width: double.infinity,
      height: 200,
      fit: BoxFit.cover,
    ),
    Positioned.fill(
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Colors.transparent,
              Colors.black.withOpacity(0.7),
            ],
          ),
        ),
      ),
    ),
    Positioned(
      bottom: 16,
      left: 16,
      child: Text(
        '제목',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
        ),
      ),
    ),
  ],
)

 

6. 버튼 효과 구현하기

터치 효과가 있는 카드 버튼을 만드는 경우

Stack(
  children: [
    Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 8,
          ),
        ],
      ),
      child: Text('카드 내용'),
    ),
    Positioned.fill(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          borderRadius: BorderRadius.circular(8),
          onTap: () => print('탭!'),
        ),
      ),
    ),
  ],
)

주의할 점

1. 크기 제약 없는 Stack 사용 주의

• Stack을 ListView나 Column 안에서 사용할 때는 명시적인 크기나 제약이 필요할 수 있다
• non-positioned 자식이 없으면 Stack이 크기를 결정할 수 없다

2. Positioned.fill 활용

• 자식을 Stack 전체 영역에 채우고 싶을 때는 Positioned.fill 사용
• 오버레이나 터치 효과 구현할 때 유용하다

3. z-index

• 자식들은 선언된 순서대로 쌓인다
• 나중에 선언된 자식이 위에 표시된다

4. Positioned 위젯 사용 시 주의사항

• top/bottom 또는 left/right를 동시에 사용하면 위젯의 크기가 강제로 Stack의 크기에 따라 결정된다 (이 경우엔 Positioned 아래에 Center위젯으로 한 번 더 감싸주면 된다.)
• width/height를 직접 지정할 때도 top/bottom 또는 left/right를 동시에 사용하면 안 된다

5. 성능 고려사항

• Stack 내부의 모든 자식들은 항상 렌더링 된다
• 보이지 않는 부분도 렌더링 되므로, 복잡한 위젯을 많이 쌓으면 성능에 영향을 줄 수 있다

6. 오버플로우 주의

• Positioned 위젯의 위치나 크기로 인해 Stack의 경계를 벗어날 수 있다
• 필요한 경우 ClipRect 등을 사용하여 오버플로우를 제어해야 한다

7. 접근성 고려

• 겹쳐진 위젯들의 순서가 스크린 리더의 읽기 순서에 영향을 준다
• 접근성을 고려할 때는 위젯의 배치 순서에 주의해야 한다

정리

Stack의 크기 결정 규칙을 이해하면 복잡한 UI도 쉽게 구현할 수 있다:

1. non-positioned 자식들이 Stack의 크기를 결정한다
2. Positioned 자식들은 결정된 Stack 크기 내에서 배치된다
3. fit 속성으로 자식들의 크기 조절이 가능하다

이러한 특성을 잘 활용하면 오버레이, 뱃지, 버튼 효과 등 다양한 UI 요소를 구현할 수 있다.