Stack & Positioned Widget 크기 결정

Flutter에서 Stack 위젯의 크기는 그 안에 있는 자식 위젯들에 의해 결정됩니다. 특히, Positioned 위젯을 사용할 때 Stack의 동작 방식을 이해하는 것이 중요합니다. Positioned 위젯은 Stack 내에서의 자신의 위치를 결정하지만, Stack의 크기 결정에 직접적으로 기여하지는 않습니다.

Stack의 크기 결정 방식

1. 자식 위젯들의 크기: Stack의 크기는 기본적으로 자식 위젯들의 크기에 의해 결정됩니다. 이는 Positioned가 아닌 일반 자식 위젯들에 해당합니다.
2. Positioned 위젯: Positioned 위젯은 Stack 내에서의 위치와 크기를 제어할 수 있지만, Stack의 전체 크기에는 기여하지 않습니다. 즉, Positioned 자식들은 Stack의 크기에 영향을 주지 않으며, Stack 바깥으로 벗어날 수도 있습니다.
3. Unpositioned 자식들의 크기: Positioned로 감싸지 않은 자식 위젯들은 Stack의 크기에 기여합니다. 이들은 Stack의 크기를 결정하는 데 사용되는 기본 크기로 작용합니다.
4. Fit 속성: Stack에는 fit 속성이 있으며, 이는 자식 위젯들이 Stack의 공간을 어떻게 채울 것인지를 결정합니다. 기본값인 StackFit.loose는 자식 위젯이 자신의 크기를 유지하도록 합니다. StackFit.expand는 자식 위젯들이 가능한 한 많은 공간을 차지하도록 합니다.
5. Overflow: 과거에는 overflow 속성이 있었지만, 이는 clipBehavior로 대체되었습니다. clipBehavior는 Stack의 경계를 벗어난 자식 위젯들이 어떻게 처리될 것인지를 결정합니다.

주어진 예시에서의 Stack 크기

제공된 코드에서 Stack은 세 개의 Container 위젯을 포함하고 있습니다. 그 중 두 개는 Positioned로 감싸져 있어 Stack의 크기 결정에 직접적으로 기여하지 않습니다. Stack의 크기는 Positioned가 아닌 세 번째 Container의 크기에 의해 결정됩니다. 만약 이 Container의 크기가 명시적으로 정의되지 않았다면, 그 내용물에 따라 크기가 결정됩니다.

결론적으로, Stack 위젯의 크기는 그 안에 있는 Positioned가 아닌 자식들의 크기에 의해 결정되며, Positioned 위젯은 이에 기여하지 않습니다.

예시 코드

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:tiktok_clone/constants/sizes.dart';

class PostVideoButton extends StatelessWidget {
  const PostVideoButton({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Positioned(
          right: 20,
          child: Container(
            height: 30,
            width: 25,
            padding: const EdgeInsets.symmetric(horizontal: Sizes.size8),
            decoration: BoxDecoration(
              color: const Color(0xff61D4F0),
              borderRadius: BorderRadius.circular(Sizes.size8),
            ),
          ),
        ),
        Positioned(
          left: 20,
          child: Container(
            height: 30,
            width: 25,
            padding: const EdgeInsets.symmetric(horizontal: Sizes.size8),
            decoration: BoxDecoration(
              color: Theme.of(context).primaryColor,
              borderRadius: BorderRadius.circular(Sizes.size8),
            ),
          ),
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(Sizes.size6),
          ),
          padding: const EdgeInsets.symmetric(
            horizontal: Sizes.size12,
          ),
          height: 30,
          child: const Center(
            child: FaIcon(
              FontAwesomeIcons.plus,
              color: Colors.black,
              size: 18,
            ),
          ),
        )
      ],
    );
  }
}