[flutter] 스택드 위젯을 사용하여 카페 예약 앱 화면 구성하기

15 Dec 2023

flutter

카페 예약 앱을 만들기 위해 Flutter의 Stack 위젯을 사용하여 화면을 구성하는 방법에 대해 알아보겠습니다.

1. Stack 위젯 소개

Stack 위젯은 여러 위젯을 겹쳐서 표시할 수 있는 위젯입니다. 각 위젯은 위치를 지정하여 배치할 수 있고, alignment 속성을 사용하여 정렬할 수 있습니다.

2. 카페 예약 앱 화면 UI 구성하기

다음은 Stack 위젯을 사용하여 카페 예약 앱의 화면을 구성하는 예시 코드입니다.

import 'package:flutter/material.dart';

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

class CafeReservationApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            // 배경 이미지
            Positioned.fill(
              child: Image.asset(
                'assets/background_image.jpg',
                fit: BoxFit.cover,
              ),
            ),
            // 예약 폼
            Positioned(
              top: 100,
              left: 20,
              child: Container(
                width: 300,
                height: 200,
                color: Colors.white,
                child: Center(
                  child: Text('예약을 입력하세요'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 Stack 위젯을 사용하여 배경 이미지와 예약 폼을 겹쳐서 표시했습니다. 각 위젯의 위치와 정렬은 Positioned 위젯을 사용하여 설정했습니다.

이제 Stack 위젯을 사용하여 카페 예약 앱의 다양한 화면을 구성해보세요!

참고: Flutter Stack Class

마치며

Stack 위젯을 활용하여 카페 예약 앱의 화면을 구성하는 방법에 대해 알아보았습니다. Stack 위젯을 사용하면 다채로운 UI를 구성할 수 있으므로, 다양한 화면을 효과적으로 구현할 수 있을 것입니다.