How to Design an Airfare Calendar to Display the Lowest Fares in Flutter
Tags: flutter, dart, webdev, mobile
Published: 2021-04-20 12:18:46

---
title: How to Design an Airfare Calendar to Display the Lowest Fares in Flutter
published: true
date: 2021-04-20 10:00:04 UTC
tags: flutter, dart, webdev, mobile
canonical_url: https://www.syncfusion.com/blogs/post/airfare-calendar-to-display-the-lowest-fares-in-flutter.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Designing-an-Airfare-Calendar-to-Display-the-Lowest-Fares-in-Flutter-672x372.png
---

When booking flights, most people tend to look for the lowest fares among the listed airlines. Syncfusion [Flutter event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar "Link to the Flutter event Calendar"), with its rich feature set, allows users to design an airfare calendar using a custom builder to show the lowest available fares for users’ travel dates. In this blog post, we are going to discuss how to design an airfare calendar and display the lowest airfares from among the listed airlines using the Flutter Calendar.

![Designing an airfare calendar using Flutter event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Designing-an-airfare-calendar-using-Flutter-event-Calendar.png)<figcaption>Airfare calendar using Flutter event Calendar</figcaption>

If you are new to our Flutter Calendar widget, please go through our [Getting Started with Flutter Calendar](https://help.syncfusion.com/flutter/calendar/getting-started "Link to the getting Started documentation of Flutter event Calendar") documentation before proceeding.

Let’s start!

## Handling fare data

First, we should get the required data, such as dates, fares, airlines, and IDs and then render the values in the corresponding UI. For demo purposes, we use random data, as illustrated in the following code example.

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

## Designing an airfare calendar

In Calendar, you can customize the presentation of the data and its interactions using the builder support. Let’s customize the calendar month cell to display the airfare, airline name, and logo based on the airline ID in each cell using the [monthCellBuilder](https://help.syncfusion.com/flutter/calendar/builders#month-cell-builder "Link to the Month cell builder in Flutter event Calendar") property. Then, assign the data values to the corresponding UI.

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

Return the designed custom UI with the data in the **monthCellBuilder** callback.

Now, the Calendar widget is configured to display the lowest airfare from the listed airlines. For more details, please refer to our [Flutter Air Fare Calendar Web application](https://flutter.syncfusion.com/#/event-calendar/fare-calendar "Link to the Flutter Airfare Calendar Web application").

![Airfare calendar showing the cheapest fares among the listed airlines](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Airfare-calendar-showing-the-cheapest-fares-among-the-listed-airlines.png)<figcaption>Airfare calendar showing the lowest fare in Flutter web application</figcaption>

## Conclusion

In this blog post, we’ve discussed about designing an airfare calendar using the Syncfusion [Flutter event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar "Link to the Flutter Event Calendar") widget. In this way, you can also design a fare calendar for booking trains, hotels, etc. You can also check out our project samples in this [Flutter Airfare](https://gitlab.syncfusion.com/essential-studio/flutter-samplebrowser/blob/development/flutter_examples/flutter_examples/lib/samples/calendar/airfare.dart "Link to the Flutter Airfare demo on GitHub") repository. Try out the steps given in this blog post and share your feedback or questions in the comments section.

Our calendar component is also available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-calendar "Link to the Blazor Calendar"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/calendar "Link to the ASP.NET Core Calendar"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/calendar "Link to the ASP.NET MVC Calendar")), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-calendar "Link to the JavaScript Calendar"), [Angular](https://www.syncfusion.com/angular-ui-components/angular-calendar "Link to the Angular Calendar"), [React](https://www.syncfusion.com/react-ui-components/react-calendar "Link to the React Calendar"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-calendar "Link to the Vue Calendar"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-calendar "Link to the Xamarin Calendar"), [UWP](https://www.syncfusion.com/uwp-ui-controls/calendar "Link to the UWP Calendar"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/calendar "Link to the WinForms Calendar"), [WPF](https://www.syncfusion.com/wpf-ui-controls/calendar "Link to the WPF Calendar"), and [WinUI](https://www.syncfusion.com/winui-controls/calendar "Link to the WinUI Calendar") platforms. Use them to build astonishing applications!

For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/ "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related Blogs

- [How to Load Appointments On Demand Using Web Services in Flutter Event Calendar](https://dev.to/syncfusion/how-to-load-appointments-on-demand-using-web-services-in-flutter-event-calendar-424j "Link to the article How to Load Appointments On Demand Using Web Services in Flutter Event Calendar")
- [How to Create a Scheduling Application Using Flutter Event Calendar](https://dev.to/syncfusion/how-to-create-a-scheduling-application-using-flutter-event-calendar-42dg "Link to the article How to Create a Scheduling Application Using Flutter Event Calendar")
- [5 Things Every Developer Must Know About Flutter 2](https://dev.to/syncfusion/5-things-every-developer-must-know-about-flutter-2-515a "Link to the article 5 Things Every Developer Must Know About Flutter 2")