Developing a travel-related game in 6 days using Flutter
How to develop an application for Android, iOS, and web with the same code.
Kiwi.com organized a Mobile Challenge in collaboration with mDevCamp, for all the mobile enthusiasts to create a travel-related game. I won 3rd place with my application — game Airline Manager. With Airline Manager, you can manage your airline — buy & sell airplanes, claim flight offers, earn coins and XP levels. Try the alfa-version by yourself on Google Play.
In this article, I will share a few examples of how I developed the application using Flutter, which took me around 4 days to finish the development part. But firstly, what is Flutter?
Flutter is an open-source UI toolkit developed by Google. With Flutter, you can develop applications for Android, iOS, and websites with just one codebase. Flutter consists of two important parts — SDK and framework. In Flutter, everything is a widget. To develop with Flutter, you will use a programming language Dart. Dart focuses on front-end development, and you can use it to create mobile and web applications. Ever wonder who is using Flutter? The most famous applications developed in Flutter are Google Ads, Stadia, Alibaba, The New York Times, or Square.
Now let’s dive into the development. First of all, I created a few proposals for the application. I thought about the layout, functions, and design. And then, I finally started coding. I started with data because I needed several objects, maps with airplanes, flight offers, user’s data (airplanes, names, coins…). The main overview screen consists of three main widgets — user information, active flight offers, my planes.
Let’s take a look at my airplane’s widget. It’s a ListView with a special scroll direction — horizontal. I used ListView.builder because the length of the list might be too long and I don’t know the exact length of it. Generally, ListView.builder is used for long lists.
ListView.builder needs itemCount and itemBuilder. ItemCount is the number of airplanes. I used the length of the array myPlanes and in itemBuilder I set how each item will look like.
The most difficult aspect was providing the data. I used Flutter for 5 months and never had a lot of information to provide between widgets. Therefore, I chose the Provider package. With this package, you can set up listeners and notify them whenever the specific data changes, for example, User id. But I didn’t have any screen or widget for registration. I designed a simple registration page. There are just two card widgets — the headline text and form.
The idea was simple — if the user fills out the form correctly and hits the register button, then it creates a new user id and navigates to the main overview page. Then, I need to save somewhere the status, that the user is signed up. I added another package to my application called SharedPreferences. With this package, I could save a list of data like user id to the phone memory. When the app launches, it just checks whether the user id already exists in the memory. If yes — navigates to the main overview screen. If not — it shows the registration page. Sounds simple. Let’s check the code.
If the form is valid, this code will run. It just locally saves a map with the user id. And every time when the app is launched, there is a check, if the app has data or not.
And in the end, I redesigned the whole application. Check the following image for comparison. The new design is on the left side.
Firstly, I thought about a color combination. I wanted something cool, modern, clean. That’s why I selected the white color. And why yellow? I honestly don’t know. I centered the appbar text, added a custom SVG icon for opening the side menu. After all this stuff, I realized that rounded corners in cards would look nicer. And then just place the text right into the Scaffold, not into the cards.
So as you can see, Flutter is a new modern framework. You can find more information here and here. Also, I suggest checking Filip Hracek’s Twitter. (He is part of the Flutter team)
If you like the idea of Airline manager — I will be happy to talk about it with you and move it faster from alfa to a real kiwi game. Feel free to reach me out on my social media.
Are you interested in working in Kiwi.com, or just receiving similar articles from Kiwi.com writers? Check our open positions and subscribe code.kiwi.com newsletter so we can inform you about new articles in the last month.
