[Note – this article was contributed by Kaylin Zaroukian (BS in CS 2019)]
For my group’s computer science capstone project we were tasked with building a mobile app that accompanies a shuttle service, with main features including routing and trip-planning. We had initially decided that we wanted to use a cross-platform framework to accomplish this. Currently there are several different frameworks that allow for cross-platform development: Xamarin, React Native, and Flutter to name a few. We were most interested in using either React Native or Flutter for our project due to recommendations from peers and our own research. To decide which of the two we preferred my group member and I each wrote a calculator app, one of us using React Native and the other using Flutter. We then compared our experience with development, comparing different aspects such as IDEs, documentation and support for the platform, supported APIs, and ease of use/overall development. After comparing the two apps we decided to use Flutter.
Flutter is an open-source cross-platform mobile development framework created by Google. Flutter just reached 1.0 at the end of last year and is continuing to make a name for itself in the mobile development space. Code in Flutter is written in Google’s own programming language Dart. User Interface (UI) elements in Flutter are created using widgets, which are essentially just immutable UI objects. Defining UI elements in widgets makes it easy to contain properties of each UI element in one central location. Flutter’s widget library is quite large meaning there is a large amount of UI elements for both iOS and Android. This is not possible without third-party libraries in some other cross-platform frameworks such as React Native. In my opinion, widgets make designing the user interface much simpler than in React Native since there is no need for third party libraries. When comparing React Native and Flutter, we found the overall code structure of Flutter and React Native to be quite similar. We felt that Flutter had slightly more ease-of-use since it did not require the use of as many third-party libraries. The documentation Google has provided for Flutter is really informative and well done and made it easy for us to get started with development in Flutter. Several APIs are available to be used with Flutter such as Firebase and Google Maps.
We initially began development with Flutter without a hitch. We had no issues using the Firebase API in our Flutter app. We decided to build out a few other UI features and functionality before coming to routing. The home screen of our app was to display an overlay of the shuttle’s route over a map of the city. We wanted to be able to simulate the daily commute of the shuttle on this route overlay. We knew that the Google Maps API supported Flutter so we believed we would be able to accomplish this map overlay and routing using Flutter. We had no issues creating the map widget in Flutter or creating markers to represent each individual shuttle stop. However, as we were ready to begin drawing the shuttle route we found that the current version of the Google Maps API that supports Flutter does not yet support routing. This means that we were unable to draw routes between shuttle stops. However, as of April 11th 2019, the Google Maps API for Flutter now supports routing and drawing polylines on the map, unfortunately this update came too late for us as our project would be handed off at the end of the semester. There is a third-party package known as map-view available in Flutter, however, it was missing some key components we needed our app to have (such as a map-view displays a static map).
At the end of the day, my group that decided routing was a key feature of our app and was essential to our final product. We decided to port our application over to native Android in order to ensure that we could include routing functionality. We decided to develop in native Android over another cross-platform framework like Flutter mostly due to the time constraints of the project. We knew the learning curve of React Native would be a steeper than that of native Android, especially since a few of our group members had experience developing in Android. Perhaps if we had more time we would have chosen React Native over native Android. Routing and polylines are supported in the Google Maps API for Android meaning we were able to construct the route overlay over the map and simulate the shuttle route. Flutter is a powerful and plentiful cross-platform mobile framework that is getting new features nearly every day. As mentioned, the missing routing features of Flutter’s Google Maps API were added shortly after we ported the project to Android. Flutter’s widget system makes creating the UI for both iOS and Android simple and is all contained within Flutter. However, Flutter is still in its infancy, but I believe that as support for Flutter grows – more and more developers will be using Flutter to create cross-platform mobile applications.
The GVSU Applied Computing Institute, GVSU’s experiential learning platform for computing students, works closely with industry partners to identify meaningful collaboration opportunities. The institute is hosted by the GVSU School of Computing, and this particular project was completed by students enrolled in their senior project course. You can learn more about sponsoring a senior project here.