[flutter] 플러터(expandable)을 사용하는 실시간 택시 예약 앱 개발 방법

04 Dec 2023

flutter

소개

실시간 택시 예약 앱은 사용자들이 택시를 예약하고 실시간으로 택시 위치를 확인할 수 있는 편리한 서비스를 제공합니다. 이번 포스트에서는 Flutter의 expandable 패키지를 활용하여 플러터 앱에서 택시 예약 기능을 개발하는 방법을 알아보겠습니다.

expandable 패키지 설치하기

expandable 패키지는 플러터에서 확장 가능한 위젯을 쉽게 구현할 수 있게 해주는 패키지입니다. 아래의 명령어를 사용하여 패키지를 설치합니다.

flutter pub add expandable

expandable 패키지 사용법

expandable 패키지를 import 합니다.

import 'package:expandable/expandable.dart';

expandable 위젯을 사용하고자 하는 위젯을 ExpandableNotifier로 감싸줍니다.

ExpandableNotifier(
  child: YourWidget(),
),

expandable 위젯을 사용하고자 하는 부분을 Expandable 위젯으로 감싸줍니다.

Expandable(
  collapsed: YourCollapsedWidget(),
  expanded: YourExpandedWidget(),
),

필요에 따라 ExpandableController를 사용하여 expandable 위젯의 상태를 제어할 수 있습니다.

final ExpandableController controller = ExpandableController();

// 확장/축소 상태를 변경하기 위한 메서드
void toggleExpanded() {
  controller.toggle();
}

플러터(expandable)을 사용한 택시 예약 앱 개발

이제 expandable을 활용하여 플러터 앱에서 택시 예약 기능을 개발해보겠습니다.

메인 화면에 택시 예약 버튼을 추가합니다.

RaisedButton(
  onPressed: () {
    toggleExpanded();
  },
  child: Text('택시 예약'),
),

택시 예약 버튼이 눌렸을 때, expandable 위젯이 확장되도록 설정합니다.

ExpandableNotifier(
  child: Column(
    children: [
      Expandable(
        collapsed: Container(),
        expanded: YourReservationWidget(),
      ),
    ],
  ),
),

택시 예약 화면에는 예약 양식이 포함되어 있습니다.

class YourReservationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: '출발지'),
          ),
          TextFormField(
            decoration: InputDecoration(labelText: '도착지'),
          ),
          RaisedButton(
            onPressed: () {
              // 택시 예약 로직
            },
            child: Text('예약하기'),
          ),
        ],
      ),
    );
  }
}

이제 플러터 앱에서 expandable 패키지를 사용하여 택시 예약 기능을 구현할 수 있습니다. 위 코드를 개선하고 필요에 따라 다양한 기능을 추가해보세요.

결론

이번 포스트에서는 플러터 앱에서 expandable 패키지를 사용하여 실시간 택시 예약 기능을 개발하는 방법을 알아보았습니다. expandable 패키지를 활용하면 확장 가능한 위젯을 쉽게 구현할 수 있어서 사용자 경험을 향상시킬 수 있습니다. 추가적인 개발이나 기능 구현에 대해서는 expandable 패키지의 공식 문서를 참고하시기 바랍니다.