[flutter] 플러터에서의 Stack 위젯을 이용한 화면 구성 예시

07 Dec 2023

flutter

플러터에서는 Stack 위젯을 사용하여 다양한 화면 구성을 할 수 있습니다. Stack 위젯은 다른 위젯들을 겹쳐서 쌓을 수 있는 위젯이며, 화면의 배치를 유연하게 제어할 수 있습니다.

아래는 Stack 위젯을 이용한 간단한 화면 구성 예시입니다.

import 'package:flutter/material.dart';

class MyStackScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stack 예시'),
      ),
      body: Stack(
        children: <Widget>[
          Positioned(
            top: 0,
            left: 0,
            child: Container(
              width: 150,
              height: 150,
              color: Colors.red,
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Container(
              width: 150,
              height: 150,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

위 예시 코드는 앱 바에 “Stack 예시”라는 제목을 가진 앱 바를 포함하고 있으며, Stack 위젯을 사용하여 빨간색과 파란색의 네모 박스를 겹쳐서 배치하는 화면을 구성합니다.

Stack 위젯은 children 속성에 배열 형태로 자식 위젯을 입력 받습니다. 각 자식 위젯은 Positioned 위젯으로 감싸져야하며, 해당 자식 위젯의 위치를 설정할 수 있습니다. 위 예시에서는 첫 번째 자식 위젯은 화면 좌측 상단에, 두 번째 자식 위젯은 화면 우측 하단에 위치하도록 설정하였습니다.

플러터에서는 Stack 위젯을 이용하여 다양한 화면 레이아웃을 구성할 수 있으니, 자신의 앱에 적합한 스타일과 레이아웃을 위해 Stack 위젯을 활용해보세요!

더 자세한 사항은 아래 플러터 공식문서를 참고하세요: