Flutter : Stack 위젯에 대해 알아보자

Stack 위젯에 대해 알아보자

Flutter Stack은 위젯을 겹쳐서 보여줄 수 있는, 쌓는 방식의 위젯입니다. Stack은 가장 큰 child의 사이즈를 따라가며, 가장 먼저 들어온 객체가 가장 아래에 쌓이는 구조입니다. Stack 위젯 역시 children에 나열한 여러 위젯을 순서대로 겹치게 합니다. children 프로퍼티에 정의한 순서대로 쌓이기 때문에, 가장 먼저 정의한 자식 위젯이 가장 아래에 놓입니다. Stack 위젯을 사용하여 이미지 위에 텍스트를 겹치게 하거나, 여러 위젯을 겹쳐서 보여줄 수 있습니다.

Flutter에서 대표적으로 위젯을 순서대로 배치할 수 있는 클래스는 Column과 Row입니다. Column과 Row는 각각 세로, 가로 방향 순서대로 위젯들을 배치합니다. 두 클래스는 쉽고 깔끔하게 위젯들을 원하는 방향으로 배치해 주지만, 두 개의 도형이나 사진이 겹쳐있는 듯한 위젯을 만들어 사용하는데 한계가 있습니다. 이때 Stack 위젯을 사용하여 여러 위젯을 겹쳐서 보여줄 수 있습니다.

Stack 위젯은 포토샵의 레이어처럼 여러 위젯을 겹쳐 놓을 수 있습니다. Column으로 Text와 Icon을 넣은 경우와 Stack에 Text와 Icon을 넣은 경우를 비교하면 Stack 위젯의 기능을 좀 더 쉽게 이해할 수 있습니다. Stack 위젯은 이미지 위에 텍스트를 겹치게 하거나, 여러 위젯을 겹쳐서 보여줄 때 사용할 수 있습니다.

Stack 위젯을 사용할 때는 다음과 같은 점을 고려해야 합니다.

- Stack 위젯은 여러 위젯을 겹쳐서 보여줄 수 있지만, 너무 많은 위젯이 겹쳐져 있으면 화면이 복잡해질 수 있습니다.
- Stack 위젯은 가장 큰 child의 사이즈를 따라가기 때문에, 크기가 다른 위젯들을 겹쳐서 사용할 때는 주의해야 합니다.
- Stack 위젯은 children 프로퍼티에 정의한 순서대로 쌓이기 때문에, 자식 위젯의 순서를 바꾸면 화면이 달라질 수 있습니다.
- Stack 위젯을 사용할 때는 Positioned 위젯을 함께 사용하여 자식 위젯의 위치를 조정할 수 있습니다. 

 

아래 Stack 위젯 사용예제입니다. 참조 바랍니다.

 

사용예 1)

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 10,
      left: 10,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
  ],
)

위 예제는 크기가 200x200인 파란색 컨테이너 위에 빨간색과 초록색 컨테이너를 각각 왼쪽 상단과 오른쪽 하단에 위치시키는 예제입니다. 파란색 컨테이너는 Stack의 첫 번째 child로 들어가고, 빨간색과 초록색 컨테이너는 Positioned 위젯을 사용하여 위치를 조정하면서 Stack 위에 겹쳐져 표시됩니다.

 

사용예 2)

Stack(
  children: <Widget>[
    Image.network(
      'https://picsum.photos/250?image=9',
      width: 250,
      height: 250,
      fit: BoxFit.cover,
    ),
    Positioned(
      bottom: 16,
      left: 16,
      child: Text(
        'Hello, World!',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
)

위 예제는 네트워크에서 이미지를 가져와 250x250 크기로 표시하면서 이미지 위에 "Hello, World!"라는 텍스트를 흰색으로 표시하는 예제입니다. 이미지는 Stack의 첫 번째 child로 들어가고, 텍스트는 Positioned 위젯을 사용하여 위치를 조정하면서 이미지 위에 겹쳐져 표시됩니다.

 

사용예 3)

Stack(
  children: <Widget>[
    Container(
      width: 400,
      height: 100,
      color: Colors.blue,
    ),
    Positioned(
      top: 10,
      left: 10,
      child: Container(
        width: 100,
        height: 80,
        color: Colors.red,
      ),
    ),
    Positioned(
      top: 50,
      left: 80,
      child: Text(
        'Hello, World!',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
)

위 예제는 크기가 400x100인 파란색 컨테이너 위에 빨간색 컨테이너와 "Hello, World!"라는 텍스트를 각각 위치시키는 예제입니다. 파란색 컨테이너는 Stack의 첫 번째 child로 들어가고, 빨간색 컨테이너와 텍스트는 Positioned 위젯을 사용하여 위치를 조정하면서 Stack 위에 겹쳐져 표시됩니다.

---

개인적으로 학습하면서 정리한 내용입니다.

잘못된 내용이 있으면 알려주세요. 확인 후 수정 및 반영하도록 하겠습니다.

아래 전체 소스 및 실행 화면입니다.

 

오늘도 감사합니다.(__)>

 

 

lib.zip

0.00MB

 

 

< 실행화면 >

Flutter - Stack 위젯 화면