Flutter Use Case — Why Choose Flutter as a Framework for Mobile Apps?

What is Flutter? Why was Flutter development perfect for our project? What did we create? Having read this article, you’ll know the answers to these questions. And, if it piques your interest, perhaps you’ll come up with some questions of your own?

Into the Business

In the times of the COVID-19 pandemic, there are a lot of restrictions for meetings and events. However, the extent of the restrictions may change in as little as two weeks, and companies that specialise in event organisation aren’t having an easy time. The agenda of their meetings may be subject to dynamic changes as well.  

Our client is the organiser of one of these “offline meetings” and up until the previous edition, the agenda for their event was distributed on paper. This year, with the restrictions and new laws currently in place, the client needed to move to the digital world. Our task was to create an app that lets end users see the current plan of events and prepare a list of topics they’re interested in. 

Why Flutter for this project?

• Flutter is fun.
• The same great UI & BL on both Android and iOS platforms.
• Performance similar to native apps.
• Potential to go beyond mobile.
• Deadline — less than 1.5 month for the project (time-to-market).
• Flutter community support.
• Libraries & plugins for hardware integration. 
• There’s a song in Poland that goes: “There were 3 of us, and each of us had different blood”. In the project, there were 3 native developers with iOS & Android background.

What is Flutter?

Flutter is a framework that has been gaining popularity since 2018. At the Google I/O Conference there was an announcement that 1 in 8 new apps (12.5 %) published in the Google Play Store is written using Flutter. Flutter is another “hybrid” framework. The main idea is to write one code for Android & iOS in Dart and compile it to a native app. Why did we choose not to use Phonegap, Xamarin or React Native? Dart is similar to Java (for a long time Java was the main language on the Android platform). Flutter is built with C, C++, Dart, and Skia (a 2D rendering engine). The engine works in a similar way to game engines. A detailed description with answers to popular questions can be found in this article.

Figure 1: Comparison of the search trends for the non-native mobile approach (keywords) in Google Search from Jan 2018 to Sep 2020

To sum up — Flutter:

• Is an SDK for Android & iOS.
• Offers a widget approach for creating apps.  
• Provides tools for hot reload and developing (debugging, view hierarchy).
• Is developed and supported by Google.
• Has big community support.

A Developer’s Point of View

What technology stack (tools & libraries) did we use? We’re fans of the resocoder approach to Flutter architecture:

• Bloc — a separation between the presentation and business logic with simple communication using states & events.
• Freezed — make a class immutable.
• Either — return Success or Failure from use cases.
• Dio — a network request.
• Moor — a local database.
• get_it — di.

Here’s what we planned, with a slight addition – use cases (single actions that should be taken, for example: read from repository) in Blocs:

Figure 2: Source: https://resocoder.com/2020/03/09/flutter-firebase-ddd-course-1-domain-driven-design-principles/

Doesn’t it look good? It surely does. There was only one pain point —  the client didn’t have any API (which meant there wouldn’t be any updates about the current agenda). The client did, however, have an old webpage that displayed data from the database, so we agreed that the event data would be hosted for us in the form of json files and the location of the files could change… so hardcoding the URLs for them in the app shouldn’t be an option. 

How did we handle this requirement? We created a config file that is being downloaded by the app (on the first run), and on another run the app checks if there’s a new version of it. The file contains all necessary information that could be changed for the next event without updating the application.

What We Created

Final Thoughts on Developing an App in Flutter

• Consider if you need a library for a particular task. Libraries are really helpful but you need to maintain them later — and major changes to the library can affect your app.
• Have a look at Flutter-related webpages and courses before starting your development. The “everything is a widget” approach could be hard to understand at the beginning.
• If you can — use Flexible widgets. Different devices have different types of screens and these widgets help to adjust the app to varied screen resolutions.
• A Widget method vs a new Widget class — if possible, create more Widget classes than methods that return widgets. This is related to screen rendering & the interaction with users.
• Most code could be fully tested on one platform and smoke-tested on another one. Exceptions are related to hardware handling or the interaction with the OS (send email, call, etc.)
• Add trailing commas at the end — it will help with code formatting.
• If possible, use the keyword const for a widget that doesn’t need to change state.
• Bloc as the architecture pattern with use cases will do the job. A widget can have more than one Bloc if needed — use the MultiBlocProvider for a better separation of concerns.  
• The widget approach for creating a mobile app is more interesting in comparison to the standard native development. 
• Flutter still needs to work on better feedback for developers regarding the issues in code.

Read also: Flutter Development — Pros & Cons

Conclusion

The project was a success — thanks to the use of Flutter, we finished before the deadline. With a dynamic approach to widgets, we could update the UI on demo sessions using the hot reload functionality to meet the Product Owner’s requirements. Writing code in Dart is similar to Java, and Flutter opens a lot of possibilities for a developer to create UX friendly mobile apps. In small apps, developers don’t need to have a native background but for bigger ones or when using hardware developers should know what’s happening under the hood. If you want to create a PoC — use Flutter. If you need to run a small project — use Flutter. Are you looking at a big project? — Why not use Flutter? Remember, Flutter will be expanding… so in the future you may be able to use Flutter not only for mobile development.

And yes, our app was positively received by the client and the offline event was moved to the online zone.  We already keep our fingers crossed for the next edition of the event.