Khi đặt vé máy bay, hầu hết mọi người đều có xu hướng tìm kiếm giá vé thấp nhất trong số các hãng hàng không được liệt kê. Syncfusion Flutter Event Calendar, với bộ tính năng phong phú, cho phép người dùng thiết kế lịch vé máy bay bằng cách sử dụng trình tạo tùy chỉnh để hiển thị giá vé thấp nhất có sẵn cho ngày đi của người dùng. Trong bài đăng trên blog này, chúng ta sẽ thảo luận về cách thiết kế lịch vé máy bay và hiển thị giá vé máy bay thấp nhất trong số các hãng hàng không được liệt kê bằng cách sử dụng Lịch Flutter.

Nếu bạn chưa quen với tiện ích Lịch Flutter của chúng tôi, vui lòng xem qua Bắt đầu với Lịch Flutter tài liệu trước khi tiếp tục.

Hãy bắt đầu!

Xử lý dữ liệu giá vé

Đầu tiên, chúng ta nên lấy dữ liệu cần thiết, chẳng hạn như ngày tháng, giá vé, hãng hàng không và ID, sau đó hiển thị các giá trị trong giao diện người dùng tương ứng. Đối với mục đích demo, chúng tôi sử dụng dữ liệu ngẫu nhiên, như được minh họa trong ví dụ mã sau.

@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;
}
}

Thiết kế lịch vé máy bay

Trong Lịch, bạn có thể tùy chỉnh cách trình bày dữ liệu và các tương tác của dữ liệu bằng cách sử dụng hỗ trợ trình tạo. Hãy tùy chỉnh ô lịch tháng để hiển thị giá vé máy bay, tên hãng hàng không và logo dựa trên ID hãng hàng không trong mỗi ô bằng cách sử dụng monthCellBuilder tài sản. Sau đó, gán các giá trị dữ liệu cho giao diện người dùng tương ứng.

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('')
],
)
],
),
);
}

Trả lại giao diện người dùng tùy chỉnh được thiết kế với dữ liệu trong monthCellBuilder gọi lại.

Giờ đây, tiện ích Lịch được định cấu hình để hiển thị giá vé máy bay thấp nhất từ ​​các hãng hàng không được liệt kê. Để biết thêm chi tiết, vui lòng tham khảo Ứng dụng web Lịch vé máy bay Flutter.

Lịch vé máy bay hiển thị giá vé rẻ nhất trong số các hãng hàng không được liệt kê
Lịch vé máy bay hiển thị giá vé thấp nhất trong ứng dụng web Flutter

Sự kết luận

Trong bài đăng trên blog này, chúng ta đã thảo luận về việc thiết kế lịch vé máy bay bằng tiện ích Lịch sự kiện Syncfusion Flutter. Bằng cách này, bạn cũng có thể thiết kế lịch đặt vé tàu hỏa, khách sạn, … Bạn cũng có thể tham khảo các mẫu dự án của chúng tôi tại đây Vé máy bay Flutter kho. Hãy thử các bước được đưa ra trong bài đăng blog này và chia sẻ phản hồi hoặc câu hỏi của bạn trong phần nhận xét.

Thành phần lịch của chúng tôi cũng có sẵn trong các nền tảng Blazor, ASP.NET (Core, MVC), JavaScript, Angular, React, Vue, Xamarin, UWP, WinForms, WPF và WinUI của chúng tôi. Sử dụng chúng để xây dựng các ứng dụng đáng kinh ngạc!

Đối với khách hàng hiện tại, phiên bản mới có sẵn để tải xuống từ trang Giấy phép và Tải xuống. Nếu bạn chưa phải là khách hàng của Syncfusion, bạn có thể dùng thử bản dùng thử miễn phí 30 ngày của chúng tôi để kiểm tra các tính năng có sẵn của chúng tôi.

Bạn cũng có thể liên hệ với chúng tôi thông qua diễn đàn hỗ trợ của chúng tôi, Direct-Trac hoặc cổng thông tin phản hồi. Chúng tôi luôn sẵn lòng hỗ trợ bạn!

Previous article12 lời khuyên để làm cho biểu đồ của bạn hài lòng hơn về mặt thẩm mỹ
Next articleDanh sách tuyệt vời về các dự án ứng dụng nguồn mở dựa trên cốt lõi ASP.NET hàng đầu
Natalia Quinn là một nàng thơ của How2Geeks, hiện đang là Copywriting và là nhà biên tập nội dung có tiếng chuyên về lĩnh vực công nghệ và kỹ thuật số. Các bài viết của Natalia đều có những nét riêng và chuyên cung cấp những thông tin về công nghệ, những mẹo công nghệ hay những bản tin công nghệ hay nhất và mới nhất hiện nay.