Key Takeaways from a large scaled mobile application using Flutter Framework

Introduction

Flutter is a cross-platform framework that allows developers to create beautiful and fast mobile applications with a single codebase. Flutter has been gaining popularity among developers and businesses for its many advantages, such as hot reload and hot restart, expressive UI, native performance, and an extensive widget library. However, Flutter is not without its challenges and limitations, especially when it comes to building large and complex applications.

According to https://flutter.dev/showcase and some web search results are businesses of all sizes around the world are building with Flutter, such as BMW, Google Pay, eBay, ByteDance, NuBank, Amazon, Toyota, … And a lot of big companies in Vietnam, such as Sendo, Be, Cake, FE Credit, MSB, Vietcombank, Viettel, and Vin Group.

In this blog post, we will share some of the key takeaways from our experience of developing a large mobile app using Flutter Framework. We will cover topics by some key points. We hope this blog post will help you avoid some of the common pitfalls and learn some best practices when using Flutter for your next project at scale.

Problem

1.????Our original idea was to create an application that was developed using a single codebase, serving many specialized features suitable for many countries.

2.????Developing such apps can be challenging, as they require a lot of data, functionality, and customization. Moreover, they need to work across different platforms, devices, and network conditions, and many teams in different countries at the same time.

3.????To overcome these challenges, we offer a cross-country mobile application development solution. Our solution enables you to:

• Build scalable and reliable cross-country mobile applications with minimal coding and maintenance.
• Deliver high-quality user experiences that adapt to different screen sizes, orientations, and preferences.
• Test and deploy your apps faster and easier with automated tools and processes.

Key points

Setting up the project structure and architecture

1.????Package Dependency

1.1.????Break down each group of specialized functions into packages/plugin modules.

1.2.????What are modules?

1.2.1.????A Core module:

a.????A module containing what most or all Feature modules need.

b.????There should be many core modules serving different purposes, for example, networking, logging, messaging, ...

1.2.2.????A Feature module:

a.????A Feature Core module:

i.????Is a module that implements a specific feature, for example, authentication, profile, onboarding, rewards, ...

ii.????It depends on how detailed the requirement description is.

b.????A Feature Country-specific module:

i.????Is a module that implements a Feature Core that includes customizations suitable for a country.

ii.????For example, in the Authentication Feature, there is InputPhoneNumberScreen.

• For Vietnam, it is required to show the phone number prefix +84.
• For India, it is required to show the phone number prefix +91.

2.????Project Structure and Architecture

2.1.????Combines Clean Architecture & Domain Driven Design & State Management by BLoC.

2.2.????A module contains 4 layers:

2.2.1.????Domain: Business Entities & Rules.

2.2.2.????Infrastructure: Describes and implements how the application communicates with the Back-End to save and retrieve data.

2.2.3.????Application: Describes and implements Application Entities & Rules & Functionality, including BLoC.

2.2.4.????Presentation: UI components & screens.

2.3.?????For example:

Code Analysis & Convention

Linter is a useful tool for identifying and highlighting errors, warnings, and style flaws in programming code, aiding in their prompt correction. When working with Flutter, implementing a linter is straightforward, and it helps maintain code cleanliness.

You can use the most common packages such as flutter_lints, dart_code_metrics. You can also create your own rules with dart_code_metrics.

Related links:

• https://dart.dev/tools/linter-rules
• https://pub.dev/packages/flutter_lints
• https://pub.dev/packages/dart_code_metrics

Localization – Internationalization

Localization is the adaptation of a product or service to meet the needs of a particular language, culture, or desired population’s “look-and-feel.” — TechTarget

Define the wordings used in each function independently to better manage change, and avoid inter-functional interference. To avoid many people, many teams editing the same wording, do the following:

• Name the wording like the value and context of its use.
• Always check if the wording is defined or not.

Related links: https://docs.flutter.dev/development/accessibility-and-localization/internationalization

Design System

Some of definitions:

• https://atlassian.design/
• https://www.figma.com/design-systems/

It must be defined as a Core Module.

Feature Modules use it to implement business requirements in the presentation layer.

Storybook Flutter is a great tool to document how to use and test UI components in Design System.

Related links: https://pub.dev/packages/storybook_flutter

Environments x Flavors

There are many types of descriptions and ways of applying multiple environments in software development. Overall, we need at least 3 environments.

• Development: is used during development.
• Beta/Stagging: testing after development.
• Production: public users.

Single Environment Design is also a nice choice by using the Feature Flags concept.

Flutter flavors are very helpful to manage build configurations for countries and environments.

Related links:

• https://www.atlassian.com/continuous-delivery/principles/feature-flags
• https://flagsmith.com/
• https://docs.flutter.dev/deployment/flavors

Integrating Back-End by Code Generation

We had to spend many hours implementing methods for calling the REST API from the Back-End. How to optimize the writing of the code and a lot of issues caused by missing some logic codes? This allowed us to reduce labor costs and development time by almost 10 times, and the client to receive the finished product faster.

With this approach, we can optimize development API services on both the client and the backend. Based on the same YAML file with a description of methods and data schemes, we can generate a 100% working service for interacting with the application server. In an alternative scenario, the programmer would repeat the identical actions. In this scenario, the occurrence of errors is not ruled out, because it is tedious.

The main purpose is to create a tool to generate all of implementing methods for calling REST API from the Back-End, by using:

• OpenAPI Specification for the APIs standard.
• Retrofit and Dio to implement methods for calling the REST API.
• Retrofit Generator for Dart combines with dart-source gen to generate implementation code.
• You must tinker a bit with the Mustache files.

Related links:

• https://spec.openapis.org/oas/v3.0.3
• https://openapi-generator.tech/
• https://github.com/trevorwang/retrofit.dart
• https://github.com/dart-lang/source_gen
• https://mustache.github.io/
• https://pub.dev/packages/retrofit
• https://pub.dev/packages/dio

Testing

Covering your code with tests is a great thing and the more dark places of your code are covered, the safer you could feel when implementing new features.

We wrote a lot of tests.

• Business logic (services, repositories, BLoCs) should be covered 85-100% in unit tests. Creating Mock data and managing them carefully is very helpful to save time to implement and make changes then.
• Widget tests for Design System (all the reusable UI components.) and Presentation classes in Feature modules.
• Integration tests as much as we can to reduce the regression test costs. Just going through some crucial workflows. The more screens they include, the better.

Alice is also a helpful tool to verify and debug HTTP requests.

Related links:

• https://docs.flutter.dev/testing
• https://pub.dev/packages/alice

Continuous Integration and Continuous Delivery (CI/CD)

A natural next step is to automate the process of building, testing, and releasing your application.

We have tried to automate as much as we can to save time during development by reducing repeat and manual work.

We also use CI/CD to manage source code quality by combining with GitFlow and Trunk-base.

At HomeCredit, we choose Azure Devops.

Related links:

• https://azure.microsoft.com/en-us/products/devops/pipelines
• https://learn.microsoft.com/en-us/azure/devops/repos/git/git-branching-guidance?view=azure-devops
• https://www.atlassian.com/continuous-delivery/continuous-integration/trunk-based-development

Wiki

Documentation as Code is a good choice. You can see and do the same as how the Flutter team deals with the docs for their code inside the Flutter framework and in fact, that is a standard for all dart packages and plugins on pub. dev.

The README file is the most important document of the project, especially when working in a team. For example, All the commands to generate, test, and run the code, various file structure decisions, diagrams, external tools and services, and information about different environments.

This is boring work but a very rewarding one!

Related link:

• https://dart.dev/guides/libraries/create-library-packages#documenting-a-library
• https://dart.dev/effective-dart/documentation#doc-comments

Conclusion

In this article, we have shared our key points when building a large scaled mobile application using the Flutter framework. We have also provided some tips and best practices for using Flutter effectively and efficiently. We hope that this article has helped you gain some insights and skills for developing your applications.

This article was written by a "romantic developer".