Flutter 앱을 개발하다 보면 다양한 위젯을 스택(Stack)으로 쌓아 올리는 경우가 있는데, 이때 각 위젯의 크기와 간격을 조절해야 할 때가 있습니다. 이 글에서는 Flutter의 스택 위젯을 사용하여 위젯 간의 크기와 간격을 조절하는 방법에 대해 알아보겠습니다.

1. 스택 위젯의 사용

스택(Stack) 위젯은 다른 위젯을 겹쳐 놓을 때 사용하는데, 각 위젯의 위치는 alignment 속성으로 조절할 수 있습니다. 이때 각 위젯의 크기와 간격은 스택 위젯 내에서 조절해야 합니다.

2. 위젯의 크기 설정

개별 위젯의 크기를 조절하기 위해서는 Positioned 위젯을 사용하여 위치와 크기를 지정할 수 있습니다. 아래는 Positioned 위젯을 사용하여 크기를 지정하는 예시입니다.

Stack(
  children: <Widget>[
    Positioned(
      top: 50.0,
      left: 50.0,
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.blue,
      ),
    ),
  ],
)

위 예제에서 Positioned 위젯을 사용하여 왼쪽으로 50픽셀, 위로 50픽셀 이동시키고, 너비와 높이를 각각 100픽셀로 설정한 후 파란색으로 채워진 정사각형을 그립니다.

3. 위젯 간의 간격 설정

위젯 간의 간격을 조절하기 위해서는 Positioned 위젯의 속성을 이용하여 위치를 조절합니다. 아래는 간격을 조절하는 예시입니다.

Stack(
  children: <Widget>[
    Container(
      color: Colors.red,
    ),
    Positioned(
      top: 10.0,
      left: 10.0,
      child: Container(
        color: Colors.blue,
        width: 50.0,
        height: 50.0,
      ),
    ),
  ],
)

위 예제에서 Positioned 위젯을 사용하여 파란색 정사각형을 왼쪽으로 10픽셀, 위로 10픽셀 이동시킵니다.

위의 예시들을 참고하여, Flutter의 스택(Stack) 위젯을 사용하여 위젯의 크기와 간격을 조절할 수 있습니다.

더 많은 정보는 Flutter 공식 문서에서 확인하실 수 있습니다.

원하시는 내용이 있거나 궁금한 점이 있으면 언제든지 물어보세요!