Stack

1.
Stack은 플러터(Flutter)에서 위젯을 겹치게 배치하는 데 사용되는 위젯입니다. Stack 안에 있는 위젯들은 서로 겹치거나 정렬할 수 있으며, 일반적으로 배경 이미지와 그 위에 오버레이되는 위젯을 구성할 때 자주 활용됩니다. Stack은 자식 위젯을 중첩하여 사용하며, 아래의 속성을 통해 정렬과 크기를 조절할 수 있습니다

2. 주요 속성과 예시 코드

1) alignment: Stack 안에 있는 자식 위젯들의 정렬 방식을 설정합니다. 예를 들어, Alignment.center로 설정하면 자식 위젯들이 중앙에 정렬됩니다.

Stack(
  alignment: Alignment.center,
  children: [
    // 자식 위젯들...
  ],
)

2) children: Stack에 중첩될 자식 위젯들을 리스트로 포함합니다. 이 자식 위젯들은 Z 순서에 따라 겹쳐집니다. 가장 마지막에 추가된 위젯이 가장 위에 표시됩니다.

Stack(
  children: [
    Image.asset('assets/background.jpg'), // 배경 이미지
    Text('안녕하세요!', style: TextStyle(fontSize: 24.0)),
    // 추가적인 자식 위젯들...
  ],
)

3) fit: Stack 안에 있는 자식 위젯들이 어떻게 확장 또는 축소되는지 설정합니다. 기본값은 StackFit.loose로, 자식 위젯의 크기에 따라 Stack의 크기가 조절됩니다.

Stack(
  fit: StackFit.expand, // Stack 크기를 확장하여 모든 자식을 포함
  children: [
    // 자식 위젯들...
  ],
)

4) overflow: Stack 안에 있는 자식 위젯들이 Stack 바깥으로 넘치는 경우 어떻게 처리할지 설정합니다. 기본값은 Overflow.clip으로, 넘치는 부분을 자르고 숨깁니다.

Stack(
  overflow: Overflow.visible, // 넘치는 부분을 숨기지 않고 표시
  children: [
    // 자식 위젯들...
  ],
)

5) Example

        return Stack(
          children: [
            Image.asset(
              "${bannerItemImageUrl[index]}",
              fit: BoxFit.cover,
              width: MediaQuery.of(context).size.width,
            ),
            Align(
              alignment: Alignment.topRight,
              child: Container(
                color: Colors.black38,
                padding: EdgeInsets.all(4.0),
                margin: EdgeInsets.all(16.0),
                child: Text(
                  (index + 1).toString() +
                      "/" +
                      bannerItemImageUrl.length.toString(),
                ),
              ),
            ),
          ],
        );

3. Stack은 다양한 디자인 요소를 구성하는 데 유용하며, 겹치는 UI 요소나 특정 위치에 위젯을 배치할 때 활용할 수 있습니다. 위에서 제공한 예시 코드를 참고하여 Stack 위젯을 사용해보세요.