플러터에서 Stack 위젯 사용 방법: 초보자 가이드

 

Flutter는 유연하고 강력한 프레임워크로, 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와줍니다.

그 중에서도 Stack 위젯은 겹쳐진 레이아웃을 디자인할 때 유용합니다.

이번 포스트에서는 Stack 위젯의 기본 사용 방법과 다양한 옵션에 대해 알아보겠습니다.

Stack 위젯이란?

 

Stack 위젯은 자식 위젯들을 겹쳐서 배치할 수 있는 위젯입니다.

이를 통해 여러 위젯을 중첩하여 다양한 레이아웃을 만들 수 있습니다.

예를 들어, 이미지 위에 텍스트를 겹치거나, 버튼 위에 아이콘을 겹치는 등의 레이아웃을 쉽게 구성할 수 있습니다.

Stack 위젯의 기본 사용법

먼저, 기본적인 Stack 위젯을 사용해보겠습니다.

아래는 Flutter 프로젝트에 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('Flutter Stack Example')),
        body: Stack(
          children: [
            Container(
              width: 300,
              height: 300,
              color: Colors.red,
            ),
            Positioned(
              top: 50,
              left: 50,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.green,
              ),
            ),
            Positioned(
              top: 100,
              left: 100,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 예제에서 Stack 위젯은 세 개의 자식 위젯을 겹쳐서 배치합니다. 각 자식 위젯은 Positioned 위젯으로 위치를 지정할 수 있습니다.

주요 옵션 설명

1. alignment

Stack 위젯의 자식 위젯들을 정렬하는 방법을 지정합니다. 기본값은 AlignmentDirectional.topStart입니다.

alignment: Alignment.center,

2. fit

Stack 위젯의 자식 위젯들을 어떻게 크기를 맞출지 지정합니다. 기본값은 StackFit.loose입니다.

fit: StackFit.expand,

3. clipBehavior

Stack 위젯의 자식들이 부모 영역을 넘어갈 때 자르기 여부를 지정합니다. 기본값은 Clip.hardEdge입니다.

clipBehavior: Clip.none,

Stack 위젯의 다양한 활용법

Stack 위젯은 다양한 상황에서 활용할 수 있습니다.

예를 들어, 복잡한 UI 요소를 겹쳐서 배치할 때, 배경 이미지 위에 텍스트를 추가할 때, 여러 레이어를 겹쳐서 시각적 효과를 줄 때 유용합니다.

1. 이미지 위에 텍스트 겹치기

이미지 위에 텍스트를 겹쳐서 배치하는 예제입니다.

class ImageOverlayExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Overlay Example')),
      body: Stack(
        children: [
          Image.network(
            'https://via.placeholder.com/300',
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
          Positioned(
            bottom: 10,
            right: 10,
            child: Container(
              color: Colors.black54,
              padding: EdgeInsets.all(10),
              child: Text(
                'Overlay Text',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2. 여러 레이어 겹치기

여러 레이어를 겹쳐서 시각적 효과를 줄 수 있습니다.

class MultiLayerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Multi Layer Example')),
      body: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 300,
            height: 300,
            color: Colors.yellow,
          ),
          Container(
            width: 250,
            height: 250,
            color: Colors.orange,
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ],
      ),
    );
  }
}

결론

Stack 위젯은 Flutter에서 겹쳐진 레이아웃을 디자인할 때 매우 유용한 도구입니다.

이를 통해 여러 위젯을 중첩하여 다양한 레이아웃을 만들 수 있으며, 이미지 위에 텍스트를 추가하거나 여러 레이어를 겹쳐 시각적 효과를 줄 수 있습니다.

Flutter 초보자도 쉽게 사용할 수 있으므로, 앱 디자인 시 Stack 위젯을 적극 활용해보세요.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱