[flutter] 스택드 위젯을 사용하여 음식 배달 앱 구성하기

15 Dec 2023

flutter

이번에는 Flutter의 스택(Stack) 위젯을 활용하여 음식 배달 앱을 만들어보려고 합니다. 스택 위젯을 사용하면 여러 위젯을 겹쳐서 화면에 표시할 수 있어서, 앱 화면을 구성하는 데 유용합니다. 이 예시에서는 간단한 디자인을 구성하기 위해 스택 위젯을 사용할 것입니다.

필요한 패키지 설치하기

먼저, 프로젝트에 다음과 같은 패키지를 설치해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  google_fonts: ^2.1.0
  flutter_svg: ^0.22.0

위 코드를 pubspec.yaml 파일의 dependencies 섹션에 추가하고, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

음식 배달 앱 UI 디자인

다음은 간단한 음식 배달 앱의 UI 디자인입니다.

import 'package:flutter/material.dart';

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

class FoodDeliveryApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // 배경 이미지
            Image.asset(
              'assets/background_image.jpg',
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            // 배달 아이콘
            Positioned(
              top: 20,
              left: 20,
              child: Icon(
                Icons.delivery_dining,
                color: Colors.white,
                size: 40,
              ),
            ),
            // 음식 주문 창
            Positioned(
              bottom: 20,
              left: 20,
              child: Container(
                padding: EdgeInsets.all(16),
                color: Colors.white,
                child: Text(
                  '음식을 주문하세요!',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 Stack 위젯을 사용하여 배경 이미지와 배달 아이콘, 그리고 음식 주문 창을 겹쳐서 화면에 표시하고 있습니다.

결론

이렇게하면 Flutter의 스택(Stack) 위젯을 사용하여 간단한 음식 배달 앱의 UI를 만들어볼 수 있습니다. 스택 위젯을 사용하면 여러 위젯을 겹쳐서 화면을 구성할 수 있어서, 다양한 디자인을 구현하는 데 유용합니다.

더 복잡한 음식 배달 앱을 구성하려면 다양한 위젯을 조합하여 보다 실용적이고 직관적인 UI를 만들어 볼 수 있습니다. 여기서는 간단한 예시를 통해 스택(Stack) 위젯의 활용성을 보여주었으니, 실제 앱을 만들 때에는 보다 다양한 기능과 디자인을 고려하여 구성해보시기 바랍니다.

이상으로, Flutter의 스택(Stack) 위젯을 활용한 음식 배달 앱 구성에 대해 알아보았습니다.