How to Design an Airfare Calendar to Display the Lowest Fares in Flutter
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (216)Angular  (112)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (230)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (82)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (949)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (142)Chart of the week  (55)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (71)Development  (664)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (513)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (394)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (621)What's new  (334)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Design an Airfare Calendar to Display the Lowest Fares in Flutter

How to Design an Airfare Calendar to Display the Lowest Fares in Flutter

When booking flights, most people tend to look for the lowest fares among the listed airlines. Syncfusion 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
Airfare calendar using Flutter event Calendar

If you are new to our Flutter Calendar widget, please go through our Getting Started with Flutter 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.

void initState() {
_globalKey = GlobalKey();
_controller = ScrollController();
_airFareDataCollection = <AirFare>[];
_airlineId = <int>[];
_fares = <String>[];
_minDate =;

/// Creates required data for the airfare data.
void _addFareDataDetails() {
_airlineId = <int>[1, 2, 3, 4];

/// 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);
.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) {
} else {

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 property. Then, assign the data values to the corresponding 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(,;
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 = && !isSameDate(, _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,
children: [
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: model.isMobileResolution
: isBestPrice
? MainAxisAlignment.spaceBetween
: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
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 :,
: Text('')
style: TextStyle(
fontSize: model.isMobileResolution ? 12 : 15,
color: Color.fromRGBO(42, 138, 148, 1),
fontWeight: FontWeight.bold),
mainAxisSize: MainAxisSize.max,
children: [
angle: -pi / 4,
child: Text(
style: TextStyle(
color: airFare.color,
fontFamily: 'Roboto',
fontSize: !model.isMobileResolution ? 20 : 14),
!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.

Airfare calendar showing the cheapest fares among the listed airlines
Airfare calendar showing the lowest fare in Flutter web application


In this blog post, we’ve discussed about designing an airfare calendar using the Syncfusion 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 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, ASP.NET (Core, MVC), JavaScript, Angular, React, Vue, Xamarin, UWP, WinForms, WPF, and WinUI platforms. Use them to build astonishing applications!

For existing customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!


Related Blogs


Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed