[flutter] 플러터에서의 Stack 위젯을 이용한 전체 화면 배치 방법

07 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 동일한 코드로 iOS와 Android 모두에서 동작하는 애플리케이션을 작성할 수 있습니다. 이번에는 플러터에서 Stack 위젯을 이용하여 전체 화면을 배치하는 방법을 알아보겠습니다.

Stack 위젯 개요

Stack 위젯은 Flutter에서 다른 위젯들을 겹쳐서 배치할 수 있게 해주는 위젯입니다. Stack으로 배치된 위젯들은 위치를 자유롭게 지정할 수 있으며, 상위에 배치된 위젯은 하위 위젯들보다 더 위에 그려집니다. 이를 이용하면 화면에 여러 위젯을 겹쳐서 규칙적이고 유연한 레이아웃을 구성할 수 있습니다.

전체 화면 배치하기

플러터에서 Stack 위젯을 이용하여 전체 화면을 배치하는 방법은 다음과 같습니다.

첫 번째로, Scaffold 위젯을 사용하여 기본적인 앱 구조를 생성합니다.

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: [
            // 여기에 배치할 위젯들을 추가합니다.
          ],
        ),
      ),
    );
  }
}

Stack 위젯의 children 속성 안에 배치할 위젯들을 추가합니다. 배치 순서에 따라 화면에 겹쳐지게 됩니다. 예를 들어, 가장 아래에 배치할 배경 이미지 위젯을 추가합니다.

...
        body: Stack(
          children: [
            Image.asset(
              'assets/background.jpg',
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            // 여기에 다른 위젯들을 추가합니다.
          ],
        ),
...

위젯들을 추가해나가면서 원하는 배치 결과를 얻을 수 있습니다. 위젯의 위치와 크기를 컨트롤할 수 있으며, Positioned 위젯을 사용하여 원하는 위치에 배치할 수도 있습니다.

...
        body: Stack(
          children: [
            Image.asset(
              'assets/background.jpg',
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            Positioned(
              top: 50.0,
              left: 20.0,
              child: Text(
                'Hello',
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
            // 더 많은 위젯들을 추가합니다.
          ],
        ),
...

위 코드에서는 배경 이미지 위젯과 텍스트 위젯을 겹쳐서 배치하고, 텍스트 위젯은 상위 왼쪽으로 50.0, 20.0의 위치에 배치되었습니다.

마무리

위의 예시 코드를 참고하여 플러터에서 Stack 위젯을 이용하여 전체 화면을 배치하는 방법을 익혀보았습니다. Stack을 활용하면 다양한 위젯을 자유롭게 겹쳐서 배치할 수 있으므로, UI를 구성하는 데 유용하게 사용할 수 있습니다. 추가적으로 Stack 위젯의 속성들을 사용하여 더 다양한 레이아웃을 만들어보세요.

Stack 위젯 개요

전체 화면 배치하기

마무리

참고 자료