[flutter] 플러터에서의 Stack 위젯을 통한 메뉴 구성 예시

07 Dec 2023

flutter

안녕하세요! 오늘은 플러터(Flutter)에서 Stack 위젯을 사용하여 메뉴를 구성하는 예시를 알려드리려고 합니다.

Stack 위젯이란?

Stack 위젯은 위젯을 겹쳐서 배치할 수 있는 위젯입니다. 다른 UI 요소들을 중첩하여 위치를 지정할 수 있어, 다양한 레이아웃을 만들 수 있습니다.

예시 코드

import 'package:flutter/material.dart';

class MenuExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('메뉴 구성 예시'),
      ),
      body: Stack(
        children: [
          Container(
            color: Colors.blue,
            height: double.infinity,
            width: double.infinity,
          ),
          Positioned(
            top: 100,
            left: 50,
            child: Text(
              '메뉴 1',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
          Positioned(
            top: 200,
            left: 50,
            child: Text(
              '메뉴 2',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MenuExample());
}

위 코드는 Stack 위젯을 사용하여 메뉴를 구성하는 예시입니다.

Scaffold 위젯을 사용하여 기본 앱 레이아웃을 설정합니다.
Stack 위젯을 사용하여 메뉴를 겹쳐서 배치합니다.
Container 위젯을 사용하여 배경색을 설정합니다.
Positioned 위젯을 사용하여 메뉴를 위치를 지정합니다.
Text 위젯을 사용하여 메뉴 텍스트를 표시합니다.

실행 결과

메뉴 구성 예시

위의 예시 코드를 실행하면 아래와 같은 메뉴 구성이 나타납니다.

메뉴 1은 좌측 상단에 위치합니다.
메뉴 2는 좌측 상단으로부터 일정한 간격으로 위치합니다.
배경색은 파란색으로 설정되어 있습니다.

마무리

위 예시 코드를 통해 플러터에서 Stack 위젯을 활용하여 메뉴를 구성하는 방법을 알아보았습니다. Stack 위젯을 사용하면 여러 개의 위젯을 겹쳐서 배치할 수 있으므로, 다양한 레이아웃을 구현하는 데 유용하게 활용할 수 있습니다. 코드를 복사하여 직접 실행해보고, 필요에 따라서 커스텀하여 사용해보시기 바랍니다.