[flutter] 플러터 스택드 위젯을 사용하여 콘텐츠 화면 구성하기

15 Dec 2023

flutter

플러터 개발을 하다 보면 여러 위젯들을 겹쳐서 화면을 구성해야 하는 경우가 종종 있습니다. 이때 유용하게 사용할 수 있는 위젯 중 하나가 Stack 위젯입니다.

스택드 위젯이란?

Stack 위젯은 다른 위젯들을 겹쳐서 화면을 구성할 수 있게 해주는 위젯입니다. 이를 통해 여러 위젯을 화면 상에 자유롭게 배치할 수 있습니다. 가령 배경 이미지 위에 텍스트를 표시하고 싶은 경우 Stack 위젯을 활용하면 간단하게 구현할 수 있습니다.

예제 코드

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

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/background.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Center(
              child: Text(
                'Hello, Flutter!',
                style: TextStyle(
                  fontSize: 30,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 예제는 배경 이미지 위에 ‘Hello, Flutter!’라는 텍스트를 가운데 정렬하여 표시하는 화면을 구성하는 코드입니다.

Stack 위젯 내에서 children 속성을 사용하여 각각의 위젯을 겹치게 배치할 수 있습니다.

결론

Stack 위젯을 활용하면 여러 위젯을 겹쳐서 화면을 구성하는 것이 가능해집니다. 이를 통해 다양한 디자인 요소들을 자유롭게 배치하고 멋진 화면을 구현할 수 있습니다.

더 많은 기능과 활용 방법을 알고 싶다면 공식 플러터 문서를 참고해 보세요.