[flutter] 플러터에서의 Stack 위젯을 이용한 다양한 레이아웃 구성 방법

07 Dec 2023

flutter

Flutter에서 Stack 위젯은 다른 위젯들을 겹쳐서 배치할 수 있는 강력한 도구입니다. 이를 통해 다양한 레이아웃 구성을 할 수 있습니다.

1. 기본적인 Stack 구성

먼저, 기본적인 Stack 위젯의 구성 방법을 알아보겠습니다. 아래의 예제 코드를 참고해주세요.

class MyStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          color: Colors.blue,
          height: 200,
          width: 200,
        ),
        Positioned(
          top: 50,
          left: 50,
          child: Container(
            color: Colors.red,
            height: 100,
            width: 100,
          ),
        ),
      ],
    );
  }
}

위 코드에서는 Stack 위젯을 사용하여 파란색으로 채워진 200x200 크기의 컨테이너와 빨간색으로 채워진 100x100 크기의 컨테이너를 겹쳐서 배치하고 있습니다. Positioned 위젯을 사용하여 빨간색 컨테이너를 상위 컨테이너 내에서 원하는 위치에 배치할 수 있습니다.

2. Stack을 이용한 복잡한 레이아웃 구성

Stack을 사용하여 복잡한 레이아웃을 구성할 수도 있습니다. 아래의 예제 코드를 참고해주세요.

class MyComplexStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Image.asset('assets/background_image.jpg'),
        Positioned(
          top: 0,
          left: 0,
          child: Container(
            padding: EdgeInsets.all(20),
            child: Text(
              '플러터 스택 위젯',
              style: TextStyle(
                fontSize: 24,
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          right: 0,
          child: Container(
            padding: EdgeInsets.all(20),
            child: RaisedButton(
              onPressed: () {},
              child: Text(
                '더 알아보기',
                style: TextStyle(
                  fontSize: 18,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

위 코드에서는 Stack 위젯을 사용하여 배경 이미지 위에 텍스트와 버튼을 겹쳐서 배치하고 있습니다. 이를 통해 깔끔하고 멋진 레이아웃을 구성할 수 있습니다.

3. 결론

Flutter의 Stack 위젯은 다양한 위젯들을 겹쳐서 배치할 수 있는 강력한 기능을 제공합니다. 이를 활용하여 다양한 레이아웃 구성이 가능하며, 복잡한 UI를 간편하게 구현할 수 있습니다. 위에서 소개한 예제 코드를 참고하여 여러분의 앱에 적용해보세요.

이 글은 Flutter의 Stack 위젯을 이용한 다양한 레이아웃 구성 방법을 소개했습니다. 자세한 내용은 공식 Flutter 문서를 참고하시기 바랍니다.

Happy coding!