[flutter] 수직으로 스택드 위젯 사용하기

15 Dec 2023

flutter

Flutter 개발에서 UI를 구축하는 데 스택(Stack) 위젯은 매우 유용합니다. 스택 위젯을 사용하면 화면에 여러 위젯을 수직으로 쌓을 수 있습니다. 이를 통해 사용자 인터페이스의 다양한 요소를 겹쳐 표시할 수 있습니다.

다음은 Flutter에서 수직으로 스택된 위젯을 구현하는 예제 코드입니다:

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('수직 스택 예제'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.yellow,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제 코드는 세 개의 컨테이너를 스택 위젯으로 정렬하여 수직으로 쌓아올린 모습을 보여줍니다. 각 컨테이너에는 다른 색상이 지정되어 있어서 겹친 부분에서 각각의 색상이 나타납니다.

수직으로 스택된 위젯을 사용하면 다양한 디자인을 구현할 수 있으며, 화면의 여러 요소를 겹쳐 표시할 때 유용하게 활용할 수 있습니다.

더 많은 Flutter 위젯과 레이아웃 구성 방법에 대해 알아보려면 Flutter 공식 문서를 참고해 주세요.