[flutter] 플러터에서의 Stack 위젯의 가로 및 세로 정렬 방법

07 Dec 2023

flutter

Stack은 Flutter에서 여러 위젯을 겹쳐서 표시할 때 사용되는 위젯입니다. Stack 위젯 안에 포함된 위젯들은 겹쳐서 표시되며, 가로 및 세로 정렬을 조정하는 방법에 대해 알아보겠습니다.

가로 정렬 방법

Align 위젯 사용하기: Align 위젯은 자식 위젯을 부모 위젯 내에서 정렬할 수 있는 위젯입니다. Align 위젯의 alignment 속성을 사용하여 가로 정렬을 조정할 수 있습니다. 예를 들어, Alignment.center는 가로 중앙 정렬을 의미합니다.

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.center,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    ),
    // 다른 위젯들 추가
  ],
)

Positioned 위젯 사용하기: Positioned 위젯은 Stack 위젯 안에서의 위치와 크기를 지정할 수 있는 위젯입니다. Positioned 위젯의 left, right, top, bottom 속성을 사용하여 가로 위치를 조정할 수 있습니다.

Stack(
  children: <Widget>[
    Positioned(
      left: 50,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    ),
    // 다른 위젯들 추가
  ],
)

세로 정렬 방법

Align 위젯 사용하기: Align 위젯의 alignment 속성을 사용하여 세로 정렬을 조정할 수도 있습니다. 예를 들어, Alignment.topCenter는 세로 상단 중앙 정렬을 의미합니다.

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.topCenter,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    ),
    // 다른 위젯들 추가
  ],
)

Positioned 위젯 사용하기: Positioned 위젯의 top, bottom, left, right 속성을 사용하여 세로 위치를 조정할 수도 있습니다.

Stack(
  children: <Widget>[
    Positioned(
      top: 50,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.red,
      ),
    ),
    // 다른 위젯들 추가
  ],
)

이러한 방법들을 조합하여 Stack 위젯 안에서 원하는 가로 및 세로 정렬을 수행할 수 있습니다.

더 많은 정보를 원하신다면, Flutter 공식 문서를 참조해주세요.