목차
소개
이번 튜토리얼에서는 Flutter에서 Expandable 위젯을 이용하여 공연 및 이벤트 예약 앱을 개발하는 방법에 대해 안내합니다. Expandable 위젯을 사용하여 UI를 구성하며, API 통신을 통해 실제 데이터를 가져올 수 있습니다.
프로젝트 설정
먼저, Flutter 개발 환경을 설정해야 합니다. Flutter 공식 사이트에서 Flutter SDK를 다운로드하고 설치합니다. Flutter 개발 환경이 준비되면, IDE인 Android Studio나 Visual Studio Code에서 Flutter 프로젝트를 생성합니다.
UI 디자인
UI 디자인은 앱의 레이아웃과 사용자 인터페이스를 구성하는 부분입니다. Expandable 위젯을 사용하여 펼침/접힘 효과를 구현하고, 리스트뷰와 컨테이너 등을 조합하여 예약하기 위한 화면을 구성합니다. 필요한 이미지와 아이콘은 해당 앱 테마에 맞게 추가할 수 있습니다.
import 'package:flutter/material.dart';
class ReservationPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('공연 및 이벤트 예약'),
),
body: ListView(
children: [
ExpandablePanel(
header: Text('공연 1'),
collapsed: Text('상세 정보'),
expanded: Column(
children: [
Text('일시: 2022년 10월 10일'),
Text('장소: 어딘가'),
ElevatedButton(
onPressed: () {
// 예약 기능 추가
},
child: Text('예약하기'),
),
],
),
),
ExpandablePanel(
header: Text('공연 2'),
collapsed: Text('상세 정보'),
expanded: Column(
children: [
Text('일시: 2022년 11월 11일'),
Text('장소: 어딘가'),
ElevatedButton(
onPressed: () {
// 예약 기능 추가
},
child: Text('예약하기'),
),
],
),
),
],
),
);
}
}
위의 코드는 공연 및 이벤트 예약 앱의 예시이며, ExpandablePanel을 사용하여 공연 정보를 펼침/접힘할 수 있게 구성하였습니다.
데이터 모델링
앱에서 필요한 데이터 모델을 정의해야 합니다. 이 예시에서는 다음과 같은 데이터 모델을 사용합니다.
class Show {
final String title;
final String date;
final String location;
Show({required this.title, required this.date, required this.location});
}
List<Show> shows = [
Show(title: '공연 1', date: '2022년 10월 10일', location: '어딘가'),
Show(title: '공연 2', date: '2022년 11월 11일', location: '어딘가'),
];
위의 코드는 공연 정보를 나타내는 Show 클래스를 정의하고, shows 리스트에 데이터를 저장하는 예시입니다.
API 통신
실제 서버에서 데이터를 가져오기 위해 API 통신을 구현해야 합니다. Flutter에서는 http 패키지를 사용하여 API 호출을 처리할 수 있습니다. 필요한 API 엔드포인트와 데이터 포맷에 맞게 호출을 작성하고, 응답을 받아와 데이터를 파싱합니다.
import 'package:http/http.dart' as http;
Future<List<Show>> fetchShows() async {
final response =
await http.get(Uri.parse('https://example.com/shows'));
if (response.statusCode == 200) {
// 응답을 파싱하여 Show 리스트로 반환
List<dynamic> data = json.decode(response.body);
return data.map((item) => Show.fromJson(item)).toList();
} else {
throw Exception('API 호출 중 오류가 발생하였습니다.');
}
}
위의 코드는 API 호출 결과를 Show 모델로 변환하는 예시입니다.
예약 기능 구현
예약 기능을 구현하기 위해 예약 버튼에 onPressed 이벤트를 추가합니다. 필요한 예약 정보를 전달하고, 서버로 예약 요청을 보낼 수 있습니다. 필요에 따라 예약 결과를 처리하고, 사용자에게 알림을 표시할 수 있습니다.
ElevatedButton(
onPressed: () {
// 예약 정보 전달 및 서버로 예약 요청 보내기
// 예약 결과 처리
},
child: Text('예약하기'),
),
위의 예시 코드는 예약 버튼에 onPressed 이벤트를 추가한 것입니다.
결론
이제 여러분은 Flutter에서 Expandable 위젯을 이용하여 공연 및 이벤트 예약 앱을 개발하는 방법을 알게 되었습니다. UI 디자인, 데이터 모델링, API 통신, 예약 기능 구현 등에 대한 안내를 통해 앱 개발에 참고하시기 바랍니다. 더 나아가서 더 많은 기능을 추가하여 사용자들에게 편리하고 유용한 앱을 제공할 수 있습니다. 이 튜토리얼을 통해 여러분의 플러터 앱 개발이 성공적이기를 바랍니다.