[flutter] 플러터(expandable)을 사용하는 식당 예약 및 배달 앱 개발 방법

04 Dec 2023

flutter

개요

본 문서에서는 플러터(Flutter)를 사용하여 식당 예약 및 배달 앱을 개발하는 방법에 대해 알아보겠습니다. 예약 및 배달 앱은 식당 목록을 보여주고, 사용자가 식당을 선택하여 예약 또는 배달 주문을 할 수 있도록 합니다. 이를 위해 expandable 위젯을 사용하여 화면을 펼치고 축소하는 기능을 구현할 것입니다.

프로젝트 설정

플러터 프로젝트를 설정하는 방법은 다음과 같습니다:

Flutter SDK 설치하기:
- Flutter SDK 다운로드
Flutter 프로젝트 생성하기:
```
flutter create 예약_배달_앱
```
프로젝트 디렉토리로 이동하기:
```
cd 예약_배달_앱
```
에디터에서 프로젝트 열기: 에디터(f.ex: VS Code, Android Studio)에서 프로젝트를 열어줍니다.

식당 목록 화면 개발

식당 목록 화면을 개발하기 위해 다음과 같은 단계를 따릅니다:

main.dart 파일에서 홈 페이지를 작성합니다:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '식당 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RestaurantListPage(),
    );
  }
}

class RestaurantListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('식당 목록'),
      ),
      body: ListView.builder(
        itemCount: 10, // 식당 개수에 맞게 변경
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('식당 $index'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => RestaurantDetailPage(),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class RestaurantDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('식당 상세정보'),
      ),
      body: Center(
        child: Text('식당 상세정보 페이지입니다.'),
      ),
    );
  }
}

앱을 실행하여 식당 목록이 표시되는지 확인합니다.

식당 예약 화면 개발

식당 예약 화면을 개발하기 위해 다음과 같은 단계를 따릅니다:

main.dart 파일에서 RestaurantDetailPage 위젯을 수정하여 예약 버튼을 추가합니다:

...

class RestaurantDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('식당 상세정보'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('식당 상세정보 페이지입니다.'),
            SizedBox(height: 16),
            RaisedButton(
              child: Text('예약하기'),
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (ctx) => AlertDialog(
                    title: Text('예약 완료'),
                    content: Text('예약이 완료되었습니다.'),
                    actions: <Widget>[
                      FlatButton(
                        child: Text('확인'),
                        onPressed: () {
                          Navigator.of(ctx).pop();
                        },
                      ),
                    ],
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

...

앱을 실행하여 식당 상세 페이지에서 예약 버튼을 눌러 예약이 완료되는지 확인합니다.

식당 배달 화면 개발

식당 배달 화면을 개발하기 위해 다음과 같은 단계를 따릅니다:

main.dart 파일에서 RestaurantDetailPage 위젯을 수정하여 배달 주문 버튼을 추가합니다:

...

class RestaurantDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('식당 상세정보'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('식당 상세정보 페이지입니다.'),
            SizedBox(height: 16),
            RaisedButton(
              child: Text('예약하기'),
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (ctx) => AlertDialog(
                    title: Text('예약 완료'),
                    content: Text('예약이 완료되었습니다.'),
                    actions: <Widget>[
                      FlatButton(
                        child: Text('확인'),
                        onPressed: () {
                          Navigator.of(ctx).pop();
                        },
                      ),
                    ],
                  ),
                );
              },
            ),
            RaisedButton(
              child: Text('배달 주문하기'),
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (ctx) => AlertDialog(
                    title: Text('배달 주문 완료'),
                    content: Text('배달 주문이 완료되었습니다.'),
                    actions: <Widget>[
                      FlatButton(
                        child: Text('확인'),
                        onPressed: () {
                          Navigator.of(ctx).pop();
                        },
                      ),
                    ],
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

...

앱을 실행하여 식당 상세 페이지에서 배달 주문 버튼을 눌러 주문이 완료되는지 확인합니다.

이상으로 플러터(expandable)을 사용하여 식당 예약 및 배달 앱을 개발하는 방법에 대해 알아보았습니다. 위의 코드를 참고하여 원하는 기능을 추가해보세요!

목차

개요

프로젝트 설정

식당 목록 화면 개발

식당 예약 화면 개발

식당 배달 화면 개발