[flutter] 플러터(expandable)을 이용한 병원 예약 및 건강 관리 앱 개발 방법

04 Dec 2023

flutter

소개

본 블로그에서는 플러터 프레임워크에서 제공하는 Expandable 위젯을 이용하여 병원 예약 및 건강 관리 앱을 개발하는 방법을 안내하겠습니다. Expandable 위젯은 사용자가 특정 위젯을 확장하고 축소할 수 있는 유용한 기능을 제공해줍니다.

프로젝트 설정

먼저, 병원 예약 및 건강 관리 앱을 개발하기 위해 Flutter를 설치해야 합니다. Flutter 설치 및 프로젝트 생성에 대한 자세한 내용은 Flutter 공식 문서(https://flutter.dev/docs/get-started/install)를 참고하시기 바랍니다.

프로젝트를 생성하고 필요한 라이브러리를 추가한 후, 아래와 같은 폴더 구조를 갖는 프로젝트를 설정해야 합니다.

project
├─ lib
│  ├─ models
│  │  ├─ reservation.dart
│  │  └─ health_data.dart
│  ├─ screens
│  │  ├─ home_screen.dart
│  │  ├─ reservation_screen.dart
│  │  └─ health_screen.dart
│  ├─ widgets
│  │  ├─ expandable_card.dart
│  │  └─ reservation_form.dart
│  └─ main.dart
├─ android
├─ ios
└─ ...

병원 예약 기능 구현

reservation.dart 파일을 생성하고 Reservation 모델 클래스를 정의합니다. ```dart class Reservation { final String name; final DateTime date; final String department;

Reservation({ required this.name, required this.date, required this.department, }); }

2. `reservation_screen.dart` 파일을 생성하고, 병원 예약을 위한 UI를 구현합니다. `ExpandableCard` 위젯을 사용하여 예약 폼을 확장 가능하게 만들어줍니다.
```dart
class ReservationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('병원 예약'),
      ),
      body: SingleChildScrollView(
        child: ExpandableCard(
          title: '예약 폼',
          child: ReservationForm(),
        ),
      ),
    );
  }
}

reservation_form.dart에서 예약 폼을 구현합니다. 사용자로부터 이름, 날짜, 부서를 입력받을 수 있는 폼 필드를 구성합니다.

main.dart 파일을 열고, routes 맵에 ReservationScreen을 등록합니다.

final Map<String, WidgetBuilder> routes = {
  // ...
  ReservationScreen.routeName: (BuildContext context) => ReservationScreen(),
};

건강 관리 기능 구현

health_data.dart 파일을 생성하고 HealthData 모델 클래스를 정의합니다. ```dart class HealthData { final String type; final double value;

HealthData({ required this.type, required this.value, }); }

2. `health_screen.dart` 파일을 생성하고, 건강 관리를 위한 UI를 구현합니다. `ExpandableCard` 위젯을 사용하여 건강 데이터를 확장 가능하게 만들어줍니다.
```dart
class HealthScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('건강 관리'),
      ),
      body: SingleChildScrollView(
        child: ExpandableCard(
          title: '건강 데이터',
          child: Column(
            children: [
              HealthDataCard(
                type: '혈압',
                value: 120.0,
              ),
              HealthDataCard(
                type: '체온',
                value: 36.5,
              ),
              // ...
            ],
          ),
        ),
      ),
    );
  }
}

health_data_card.dart 파일을 생성하고, 건강 데이터를 표시하는 HealthDataCard 위젯을 구현합니다.

main.dart 파일을 열고, routes 맵에 HealthScreen을 등록합니다.

final Map<String, WidgetBuilder> routes = {
  // ...
  HealthScreen.routeName: (BuildContext context) => HealthScreen(),
};

결론

이제 플러터를 이용하여 병원 예약 및 건강 관리 앱을 개발하는 방법을 알게 되었습니다. Expandable 위젯을 활용하여 사용자에게 더 편리한 앱을 제공할 수 있습니다. 본 예제에서는 기본적인 화면 구성과 데이터 모델링만 다루었으므로, 추가적인 기능을 구현하기 위해서는 앱의 요구 사항에 맞게 코드를 수정하셔야 합니다.

더 자세한 내용은 플러터(Flutter) 공식 문서(https://flutter.dev/docs)를 참고하시기 바랍니다.

목차

소개

프로젝트 설정

병원 예약 기능 구현

건강 관리 기능 구현

결론