[flutter] 스택드 위젯을 사용하여 일정 관리 앱 구성하기

15 Dec 2023

flutter

오늘은 Flutter에서 스택드(Stacked) 위젯을 사용하여 간단한 일정 관리 앱을 만드는 방법에 대해 알아보겠습니다.

스택드(Stacked) 위젯이란?

스택드(Stacked) 위젯은 Flutter에서 여러 위젯을 겹쳐서 표시할 때 사용되는 유용한 레이아웃 위젯입니다. 스택드 위젯을 사용하면 여러 위젯을 겹쳐서 배치할 수 있으며, 각 위젯의 크기와 위치를 지정할 수 있습니다.

일정 관리 앱 레이아웃 만들기

우선, 간단한 일정 관리 앱의 레이아웃을 구성해보겠습니다. 일정 목록을 표시하는 부분과 새로운 일정을 추가하는 부분으로 구성될 것입니다.

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('일정 관리 앱'),
        ),
        body: Center(
          child: Stack(
            children: <Widget>[
              // 일정 목록 표시하는 위젯
              Positioned(
                top: 0,
                left: 0,
                right: 0,
                height: 200,
                child: Container(
                  color: Colors.blue,
                  child: Center(
                    child: Text('일정 목록'),
                  ),
                ),
              ),
              // 새로운 일정을 추가하는 버튼
              Positioned(
                bottom: 20,
                left: 0,
                right: 0,
                child: Center(
                  child: ElevatedButton(
                    onPressed: () {
                      // 새로운 일정 추가 기능 구현
                    },
                    child: Text('일정 추가'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서 일정 목록을 표시하는 부분과 새로운 일정을 추가하는 버튼이 겹쳐서 배치되도록 Stack 위젯과 Positioned 위젯을 사용했습니다.

결론

스택드(Stacked) 위젯을 사용하여 Flutter 앱의 레이아웃을 구성할 때, 여러 위젯을 겹쳐서 표시하는 효과적인 방법을 배웠습니다. 이러한 방식을 활용하여 다양한 앱의 UI 레이아웃을 구성할 수 있습니다.

기본적인 예제를 통해 스택드(Stacked) 위젯을 활용한 일정 관리 앱을 만드는 방법에 대해 알아보았습니다. 여기서 소개한 내용을 바탕으로 본격적인 앱 개발에 도전해 보세요!