[flutter] 플러터에서의 위젯 스택(Stack) 개념

07 Dec 2023

flutter

플러터(Flutter)는 구글에서 제공하는 UI 프레임워크로, 다양한 위젯을 조합하여 사용자 인터페이스를 만들 수 있습니다. 위젯은 화면에 표시되는 UI 요소를 의미하며, 이 중에서 “스택(Stack)”은 다른 위젯들을 쌓아 올리는 개념을 가지고 있습니다.

스택(Stack)의 개념

스택(Stack)은 일렬로 쌓인 여러 개의 요소를 가지고 있는 자료구조입니다. 스택은 항상 가장 위에 있는 요소에만 접근할 수 있으며(top 요소), 새로운 요소는 항상 위에 쌓이게 됩니다. 이러한 특징으로 스택은 “LIFO(Last-In, First-Out)”라고도 합니다.

플러터에서의 스택(Stack)은 위젯의 쌓임 순서를 결정하는 데 사용됩니다. 예를 들어, 만약 스택 위에 A, B, C 순서로 위젯을 쌓으면 C 위에 B 위에 A가 나타나게 됩니다. 이렇게 스택을 사용하면 원하는 위젯이 다른 위젯 위에 오게 할 수 있으며, 겹쳐져 보이는 효과나 더 중요한 위젯을 화면 상단에 표시하는 등의 다양한 UI 효과를 구현할 수 있습니다.

스택(Stack) 예제

아래는 스택(Stack)을 사용하여 플러터에서 위젯을 쌓는 예제입니다.

import 'package:flutter/material.dart';

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

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

위 예제에서는 먼저 Stack 위젯을 생성하고, children 속성을 사용하여 스택 위에 쌓을 위젯들을 배열 형태로 전달합니다. 각 위젯의 위치와 크기를 조정하려면 Positioned 위젯을 사용하여 설정할 수 있습니다.

이 예제에서는 파란색 배경 위에 빨간색과 초록색 정사각형이 겹치도록 설정되어 있습니다.

결론

플러터에서의 위젯 스택(Stack)은 다른 위젯을 쌓아 올릴 수 있는 개념입니다. 이를 통해 다양한 UI 효과를 구현할 수 있으며, 겹쳐져 보이는 효과나 화면의 상단에 중요한 위젯을 배치하는 등의 다양한 레이아웃을 만들 수 있습니다.