[flutter] 플러터에서의 Stack 위젯 사용법

07 Dec 2023

flutter

Stack 위젯은 플러터에서 여러 위젯을 겹쳐서 사용할 수 있는 유용한 위젯입니다. 이 포스트에서는 플러터에서 Stack 위젯을 사용하는 방법에 대해 알아보겠습니다.

Stack 위젯의 구조

Stack 위젯은 자식(child) 위젯들을 겹쳐서 배치할 수 있는 위젯입니다. Stack 위젯의 자식(child) 위젯들은 stack에 쌓이는 순서대로 화면에 나타납니다. 가장 위에 있는 자식 위젯이 제일 처음 그려지고, 그 아래에 있는 자식 위젯들이 순서대로 그려집니다.

Stack 위젯 사용법

Stack 위젯을 사용할 때는 children 속성을 사용하여 자식 위젯들을 추가하면 됩니다. 자식 위젯은 Stack 위젯에 추가된 순서대로 쌓입니다.

다음은 Stack 위젯을 사용하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack Widget Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Widget Example'),
        ),
        body: Center(
          child: Stack(
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
              Positioned(
                top: 50,
                left: 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
              Positioned(
                top: 100,
                left: 100,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서는 Stack 위젯 내에 세 개의 Container 위젯을 추가하여 겹쳐서 배치하고 있습니다. 다른 Container 위젯들을 각각 특정 위치로 이동시키기 위해 Positioned 위젯을 사용하였습니다.

결론

위에서 살펴본 예제를 통해 플러터에서의 Stack 위젯을 사용하는 방법을 알아보았습니다. Stack 위젯은 여러 위젯을 겹쳐서 사용해야 하는 경우 유용하게 활용할 수 있는 위젯입니다. 추가적으로 Stack 위젯의 다양한 속성과 기능에 대해서도 더 알아보시길 바랍니다.

참고 링크:

Official Flutter Documentation