목차
소개
이번 블로그 포스트에서는 플러터(expandable)을 활용하여 주문 및 배송 추적 앱을 개발하는 방법에 대해 알아보겠습니다.
플러터(expandable)란?
플러터(expandable)는 플러터 프레임워크에 포함된 확장 가능한 위젯 라이브러리입니다. 이 라이브러리를 사용하면 펼쳐지고 접힐 수 있는 위젯을 생성할 수 있습니다. 이를 통해 사용자가 주문 및 배송 추적 정보를 볼 수 있는 편리한 인터페이스를 구현할 수 있습니다.
주문 및 배송 추적 앱 개발 방법
프로젝트 설정
우선 플러터 프로젝트를 생성하고 필요한 라이브러리를 추가해줍니다. 이후 프로젝트 설정을 진행합니다.
플러터(expandable) 설치
pubspec.yaml 파일에 플러터(expandable) 라이브러리를 추가합니다. 아래와 같이 작성해주세요.
dependencies:
flutter:
sdk: flutter
expandable: ^4.0.0
이후 터미널에서 flutter packages get 명령어를 실행하여 라이브러리를 설치해줍니다.
주문 및 배송 추적 페이지 구현
주문 및 배송 추적 페이지를 위한 별도의 StatefulWidget을 생성합니다. 이 페이지에서는 주문 및 배송 상태에 따라 펼쳐지고 접힐 수 있는 위젯을 사용하여 정보를 표시합니다.
expandable 위젯 사용
expandable 라이브러리에서 제공하는 ExpandableNotifier, Expandable, ExpandablePanel 등의 위젯을 사용하여 정보를 펼쳐지고 접힐 수 있도록 구현합니다. 이를 통해 사용자는 주문 및 배송 정보를 토글할 수 있게 됩니다.
class OrderTrackingPage extends StatefulWidget {
@override
_OrderTrackingPageState createState() => _OrderTrackingPageState();
}
class _OrderTrackingPageState extends State<OrderTrackingPage> {
bool _isExpanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('주문 및 배송 추적'),
),
body: Center(
child: ExpandableNotifier(
child: Column(
children: <Widget>[
Expandable(
collapsed: ExpandableButton(
child: Text('주문 정보'),
),
expanded: Column(
children: <Widget>[
Text('주문 번호: 123456'),
Text('주문 일자: 2022-01-01'),
Text('주문자 이름: 홍길동'),
],
),
),
ExpandablePanel(
header: ExpandableButton(
child: Text('배송 정보'),
),
collapsed: Container(),
expanded: Column(
children: <Widget>[
Text('배송 일자: 2022-01-10'),
Text('배송지 주소: 서울특별시 강남구'),
],
),
),
],
),
),
),
);
}
}
위 코드는 플러터(expandable)를 이용하여 주문 및 배송 추적 페이지를 구현하는 예시입니다.
결론
위의 방법을 따라가면 플러터(expandable)를 활용한 주문 및 배송 추적 앱을 개발할 수 있습니다. 해당 앱을 사용하면 사용자는 간편하게 주문 및 배송 정보를 확인할 수 있을 것입니다.