Flutter에서 최저 요금을 표시하도록 항공 요금 달력을 디자인하는 방법

항공권을 예약할 때 대부분의 사람들은 나열된 항공사 중에서 가장 저렴한 요금을 찾는 경향이 있습니다. 싱크퓨전 Flutter event Calendar , 풍부한 기능 세트를 통해 사용자는 사용자 정의 빌더를 사용하여 항공 요금 달력을 디자인하여 사용자의 여행 날짜에 사용 가능한 최저 요금을 표시할 수 있습니다. 이 블로그 게시물에서는 항공 요금 달력을 디자인하고 Flutter Calendar를 사용하여 나열된 항공사 중에서 가장 저렴한 항공 요금을 표시하는 방법에 대해 논의할 것입니다.

Flutter 이벤트 캘린더를 사용한 항공료 캘린더

Flutter Calendar 위젯을 처음 사용하는 경우 Getting Started with Flutter Calendar 진행하기 전에 문서.

시작하자!

운임 데이터 처리

먼저 날짜, 요금, 항공사 및 ID와 같은 필수 데이터를 가져온 다음 해당 UI에 값을 렌더링해야 합니다. 데모 목적으로 다음 코드 예제와 같이 임의의 데이터를 사용합니다.

@override
void initState() {
_globalKey = GlobalKey();
_controller = ScrollController();
_airFareDataCollection = <AirFare>[];
_airlineId = <int>[];
_fares = <String>[];
_minDate = DateTime.now();
_addFareDataDetails();
_addAirFareData();
super.initState();
}

/// Creates required data for the airfare data.
void _addFareDataDetails() {
_airlineId = <int>[1, 2, 3, 4];
_fares.add("\$134.50");
_fares.add("\$305.00");
_fares.add("\$152.66");
_fares.add("\$267.09");
_fares.add("\$189.20");
_fares.add("\$212.10");
_fares.add("\$350.50");
_fares.add("\$222.39");
_fares.add("\$238.83");
_fares.add("\$147.27");
_fares.add("\$115.43");
_fares.add("\$198.06");
_fares.add("\$189.83");
_fares.add("\$110.71");
_fares.add("\$152.10");
_fares.add("\$199.62");
_fares.add("\$146.15");
_fares.add("\$237.04");
_fares.add("\$100.17");
_fares.add("\$101.72");
_fares.add("\$266.69");
_fares.add("\$332.48");
_fares.add("\$256.77");
_fares.add("\$449.68");
_fares.add("\$100.17");
_fares.add("\$153.31");
_fares.add("\$249.92");
_fares.add("\$254.59");
_fares.add("\$332.48");
_fares.add("\$256.77");
_fares.add("\$449.68");
_fares.add("\$107.18");
_fares.add("\$219.04");
}

/// Creates the airfare data with required information.
void _addAirFareData() {
_airFareDataCollection = <AirFare>[];
for (int i = 0; i < 100; i++) {
int id = i % _airlineId.length;
if (id == 0) {
id = 1;
} else if (id > _airlineId.length) {
id -= 1;
}
final String fare = _fares[i % _fares.length];
final Color color = _getAirPlaneColor(id);
_airFareDataCollection
.add(AirFare(fare, color, 'Airways ' + id.toString()));
}
}

/// Returns color for the airplane data.
Color _getAirPlaneColor(int id) {
if (id == 1) {
return Colors.grey;
} else if (id == 2) {
return Colors.green;
} else {
return Colors.red;
}
}

항공 요금 달력 디자인

캘린더에서 빌더 지원을 사용하여 데이터 표시 및 해당 상호 작용을 사용자 정의할 수 있습니다. monthCellBuilder 재산. 그런 다음 해당 UI에 데이터 값을 할당합니다.

SfCalendar _getAirFareCalendar() {
return SfCalendar(
showNavigationArrow: model.isWeb,
view: CalendarView.month,
monthCellBuilder: _monthCellBuilder,
showDatePickerButton: true,
minDate: _minDate,
);
}

/// Returns the builder for month cell.
Widget _monthCellBuilder(
BuildContext buildContext, MonthCellDetails details) {
Random random = Random();
final bool isToday = isSameDate(details.date, DateTime.now());
final AirFare airFare = _airFareDataCollection[random.nextInt(100)];
final Color defaultColor =
model.themeData != null && model.themeData.brightness == Brightness.dark
? Colors.white
: Colors.black54;
final bool isBestPrice = airFare.fare == _kBestPrice;
final bool isDisabledDate =
details.date.isBefore(_minDate) && !isSameDate(details.date, _minDate);
return Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(width: 0.1, color: defaultColor),
left: BorderSide(width: 0.1, color: defaultColor),
),
color: isDisabledDate
? Colors.grey.withOpacity(0.1)
: isBestPrice
? Colors.yellow.withOpacity(0.2)
: null),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: model.isMobileResolution
? MainAxisAlignment.center
: isBestPrice
? MainAxisAlignment.spaceBetween
: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
details.date.day.toString(),
style: TextStyle(
color: isToday
? model.backgroundColor
: isDisabledDate
? Colors.grey
: null,
fontWeight: isToday ? FontWeight.bold : null),
),
!model.isMobileResolution && airFare.fare == _kBestPrice
? Text(
'Best Price',
style: TextStyle(
color: isDisabledDate ? Colors.grey : Colors.green),
)
: Text('')
],
),
),
Text(
airFare.fare,
style: TextStyle(
fontSize: model.isMobileResolution ? 12 : 15,
color: Color.fromRGBO(42, 138, 148, 1),
fontWeight: FontWeight.bold),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Transform.rotate(
angle: -pi / 4,
child: Text(
'\u2708',
style: TextStyle(
color: airFare.color,
fontFamily: 'Roboto',
fontSize: !model.isMobileResolution ? 20 : 14),
textAlign: TextAlign.center,
),
),
!model.isMobileResolution ? Text(airFare.airline) : Text('')
],
)
],
),
);
}

monthCellBuilder 콜백의 데이터와 함께 디자인된 사용자 정의 UI를 반환합니다.

이제 달력 위젯이 나열된 항공사의 최저 항공료를 표시하도록 구성되었습니다. 자세한 내용은 Flutter Air Fare Calendar Web application을 참조하십시오. .

Flutter 웹 애플리케이션에서 최저 요금을 보여주는 항공 요금 달력

결론

이 블로그 게시물에서는 Syncfusion Flutter event Calendar을 사용하여 항공 요금 달력을 디자인하는 방법에 대해 논의했습니다. 위젯. 이러한 방식으로 기차, 호텔 등을 예약하기 위한 요금 달력을 디자인할 수도 있습니다. 또한 이 Flutter Airfare에서 프로젝트 샘플을 확인할 수 있습니다. 저장소. 이 블로그 게시물에 제공된 단계를 시도하고 의견 섹션에서 피드백이나 질문을 공유하십시오.

캘린더 구성 요소는 Blazor에서도 사용할 수 있습니다. , ASP.NET( Core , MVC ), JavaScript , Angular , React , Vue , Xamarin , UWP , WinForms , WPF , 및 WinUI 플랫폼. 놀라운 응용 프로그램을 구축하는 데 사용하십시오!

기존 고객의 경우 License and Downloads에서 새 버전을 다운로드할 수 있습니다. 페이지. 아직 Syncfusion 고객이 아닌 경우 30일 free trial 사용 가능한 기능을 확인하십시오.

support forum을 통해서도 문의하실 수 있습니다. , Direct-Trac , 또는 feedback portal . 기꺼이 도와드리겠습니다!

관련 블로그