Colin's Blog
[flutter] 플러터(expandable)과 관련된 숙박 업소 예약 및 호텔 관리 앱 개발 방법

소개

플러터는 구글에서 개발한 모바일 애플리케이션 개발 프레임워크로, 단일 코드베이스를 사용하여 안드로이드 및 iOS 앱을 생성할 수 있습니다. 이번 포스트에서는 플러터의 ‘expandable’ 기능을 사용하여 숙박 업소 예약 및 호텔 관리 앱을 개발하는 방법에 대해 알아보겠습니다.

기능 요구사항

  1. 사용자는 숙박 업소 검색을 위해 도시명을 입력할 수 있어야 합니다.
  2. 검색 결과로 나타나는 숙소 목록은 확장 가능한(expandable) 형식으로 구성되어야 합니다.
  3. 사용자는 각 숙소를 선택하여 상세 정보를 확인할 수 있어야 합니다.
  4. 사용자는 선택한 숙소를 예약할 수 있어야 합니다.
  5. 호텔 관리자는 앱을 통해 예약된 숙소 목록을 확인하고 관리할 수 있어야 합니다.

개발 단계

1. 플러터 프로젝트 생성

우선 flutter 명령어를 사용하여 새로운 플러터 프로젝트를 생성합니다.

$ flutter create hotel_booking_app

2. 필요한 패키지 설치

프로젝트의 pubspec.yaml 파일에 다음 패키지를 추가합니다.

dependencies:
  expandable: ^5.0.1

그리고 패키지를 설치합니다.

$ flutter pub get

3. 홈 화면 개발

lib/main.dart 파일을 열고 다음과 같이 코드를 작성합니다.

import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';

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

class HotelBookingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hotel Booking App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  final List<Hotel> hotels = [
    Hotel(name: 'Hotel A', price: 100),
    Hotel(name: 'Hotel B', price: 200),
    Hotel(name: 'Hotel C', price: 150),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hotel Booking')),
      body: ListView.builder(
        itemCount: hotels.length,
        itemBuilder: (context, index) {
          return ExpandableNotifier(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Card(
                child: Column(
                  children: [
                    Expandable(
                      collapsed: ExpandableButton(
                        child: ListTile(
                          title: Text(hotels[index].name),
                          subtitle: Text('\$${hotels[index].price}'),
                        ),
                      ),
                      expanded: Column(
                        children: [
                          ListTile(
                            title: Text('Description'),
                            subtitle: Text('This is a hotel description.'),
                          ),
                          ElevatedButton(
                            onPressed: () {
                              // 예약 로직 추가
                            },
                            child: Text('Book Now'),
                          ),
                        ],
                      ),
                    ),
                    ExpandablePanel(
                      collapsed: Text('More Info'),
                      expanded: Text(
                        'Address: 123 Main St.\nPhone: 555-1234',
                        softWrap: true,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class Hotel {
  final String name;
  final int price;

  Hotel({required this.name, required this.price});
}

4. 호텔 관리자용 화면 개발

호텔 관리자는 예약된 숙소 목록과 관리 기능을 확인할 수 있는 별도의 화면이 필요합니다. lib/main.dart 파일을 열고 HomePage 클래스 아래에 다음과 같이 코드를 작성합니다.

class AdminPage extends StatelessWidget {
  final List<Hotel> bookings = [
    Hotel(name: 'Hotel A', price: 100),
    Hotel(name: 'Hotel B', price: 200),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Admin')),
      body: ListView.builder(
        itemCount: bookings.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(bookings[index].name),
            subtitle: Text('\$${bookings[index].price}'),
          );
        },
      ),
    );
  }
}

5. 라우팅 설정

lib/main.dart 파일을 열고 HotelBookingApp 클래스의 HomePage 위젯에 onTap 이벤트를 추가하여 호텔 관리자용 화면으로 이동할 수 있도록 설정합니다.

class HomePage extends StatelessWidget {
  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hotel Booking')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            ListTile(
              title: Text('Home'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Admin'),
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => AdminPage()));
              },
            ),
          ],
        ),
      ),
      body: ListView.builder(
        // ...
  }
}

결론

위의 단계를 따라가면 플러터의 expandable 기능을 활용하여 숙박 업소 예약 및 호텔 관리 앱을 개발할 수 있습니다. 이를 기반으로 필요한 기능을 추가하고 디자인을 개선하여 완전한 앱을 만들어 보세요.

참고 자료

© 2018 Colin. All rights reserved.