[flutter] 플러터에서의 Stack 위젯을 이용한 반응형 디자인 구현 방법

07 Dec 2023

flutter

안녕하세요! 이번에는 플러터에서 Stack 위젯을 사용하여 반응형 디자인을 구현하는 방법에 대해 알아보겠습니다.

Stack 위젯이란?

Stack 위젯은 다른 위젯들을 겹쳐서 배치할 때 사용하는 위젯입니다. 가장 마지막에 추가된 위젯이 상위에 배치되며, 순서에 따라서 겹쳐진 위젯들이 보여집니다.

반응형 디자인을 위한 Stack 사용하기

사용자의 화면 크기나 디바이스 크기에 따라서 화면을 동적으로 조절해야할 때 Stack 위젯을 사용하면 편리합니다.

import 'package:flutter/material.dart';

class ResponsiveDesignScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 하단에 배치할 위젯
          Positioned(
            left: 0,
            bottom: 0,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: 50,
              color: Colors.blue,
            ),
          ),
          // 상단에 배치할 위젯
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: 200,
              color: Colors.red,
            ),
          ),
          // 가운데에 배치할 위젯
          Positioned(
            top: MediaQuery.of(context).size.height / 2 - 50,
            left: MediaQuery.of(context).size.width / 2 - 50,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.yellow,
            ),
          ),
        ],
      ),
    );
  }
}

위 예시 코드에서는 Stack 위젯 안에 여러 개의 Positioned 위젯을 사용하여 각각의 위치를 설정하였습니다. 하단에는 파란색 컨테이너가, 상단에는 빨간색 컨테이너가, 가운데에는 노란색 컨테이너가 배치되어있습니다.

위젯의 위치에는 MediaQuery.of(context).size를 사용하여 현재 화면의 크기를 동적으로 가져와 설정할 수 있습니다. 이를 활용하여 다양한 화면 크기에서도 일관된 디자인을 구현할 수 있습니다.

결론

Flutter에서 Stack 위젯을 사용하여 반응형 디자인을 구현하는 방법에 대해 알아보았습니다. Stack을 이용하면 다양한 화면 크기에서 동적으로 UI를 조절하는 것이 가능하며, 간편하게 여러 위젯을 겹칠 수 있습니다. 반응형 디자인을 구현할 때 Stack 위젯을 적극 활용해보세요!

더 많은 정보를 알고 싶다면, Flutter 공식 문서를 참고해보세요.