It’s common that a company needs not only the web, but also the mobile application to present its products. Building the mobile app can be cumbersome because we need to target 2 platforms, IOS and Android. Now, Flutter solves this problem for us.
Flutter generates both IOS and Android App at one time. We don’t need to create the same app twice just for 2 different platforms. The application is native. That means the performance of the app is just like the native IOS or Android apps. Because of these 2 advantages, the developer can build the high qualified mobile app quickly, and let the company decides whether they need to go further on building mobile app. So we can say, Flutter is a great tool to start building a mobile app.
Flutter app is written by Dart. It’s a new language. But don’t worry, it’s very easy. You don’t even need spend extra time to learn it because you will master it during coding.
In general, this article will talk about:
- set up mobile app (in brief)
- design the structure of app (in details)
Since we have built a web using Angular (See more in my previous article: [Angular + Symfony] A quick website setup). I will not only present how to set up a mobile app with Flutter, but also make comparison between Flutter and Angular.
Set up
First, we need to install Flutter SDK. Please follow the instruction on the Flutter official website (Get started) base on your computer operating system.
After installing, you will have:
- Flutter SDK (I recommend to update your PATH variable for Flutter. We need to use command line from time to time during the development)
- Android and IOS emulators (by installing Android studio and Xcode). you can run your app on real device, too. Always test your app on real device before deploying it.
- A simple Flutter app
After following the Get Started on Flutter official website, you will have a general idea about Flutter. You will understand how to build a Flutter app, learn some simple widgets to create an UI.
Next step is to design the app.
Design mobile app
In this part, I don’t want to talk about UI because everyone has his only taste of UI. My UI design may be useless for others. Instead, I want to talk about how to design the structure of app. The structure contains:
- set environment of application
- manage data in the app (state management)
- set http networking to connect back-end and serialise the json from the back-end
- present the data
I believe the structure of app can be useful for the reader. I come from Angular, so I will make comparison with Angular during the presentation.
Environment
What’s environment ? Environment is a file which contains back-end endpoints, like “https://your-back-end.com/api”, and service key, like google maps key. These are the environment variables. App needs different environments. For exemple, we can use local server instead of real server during development, then the App needs 2 environments: production and local.
Angular makes it very easy to set up environments. First, create a file and set environment variables, then add new environment into configuration file: angular.json, finally compile the app with targeted environment. (See more in my previous article: [Angular + Symfony] A quick website setup).
Same goes for Flutter. First, create an environment file. I use json file to stock environment variables. A local environment can be set as followed.
# the path is /<appName>/environments/local.json {
"apiUrl": "http://server.local/api",
"loginUrl": "http://server.local/login_check",
"googleMapsKey": "google-maps-key"
}
Then, add the environment into configuration file: pubspec.yaml. I add the whole environment folder. You can add the specified file, too.
# The following section is specific to Flutter.flutter:
assets:
- environments/
# - environments/local.json
Final step is a little bit different from Angular. To target the different environment, we will the create different main.dart. For example, to target local environment, I create main_local.dart as followed.
Flutter looks for main() function to compile the app. In this main() function, it, first load the environment, then run the app. The EnvLoader is presented as followed.
Now, the local environment is set up. To target it in development mode, run the command line.
flutter run -t lib/main_local.dartSame goes for building app.
# build ios app
flutter build ios -t lib/main_local.dart# build android app (APK)
flutter build apk -t lib/main_local.dart
State management
In Angular, I use Service and RxJS to manage data. The idea is simple. I use Service to fetch data from the back-end. The Service is injected into the Component which needs it.
In details, The Service fetches data, and turns them into Observable using RxJs.The Component can read the Observable because the Service is injected into it, then the Component subscribes the Observable (either using subscribe() function, or using async pipe) to get the data.
If the Component changes the data, it will put the updated data into a function of the Service. The function will return an Observable, and the Component needs subscribe it to let the Service know that he need to send the updated data to the back-end.
Same goes for Flutter.
In Flutter, Provider fetches data. After the data is loaded successfully, the Provider will send data to the Widget, and tell the Widget to rebuild itself.
If the Widget modifies the data, it will use the function of the Provider, and send the updated data to the back-end.
In conclusion, the state management is similar in Angular and Flutter. Service + RxJS in Angular is the Provider in Flutter, while the Component in Angular is the Widget in Flutter. If you need to know more, check the Flutter official document.
Next step, I will present the two important detail of this state management:
- fetch data by Provider (or Service)
- show and change data by Widget (or Component)
Networking and Serialisation
First, we need create connect with the back-end. In both Angular and Flutter, we have the http package. It makes the connection so easy.
In Angular, the http return an Observable.
return http.get(`${environment.config.apiUrl}/notebooks/1`);In Flutter, the http return a Future.
final urlPrefix = EnvLoader.getApiUrl();return http.get('${urlPrefix}/notebooks/1');
Both Observable and Future are asynchronous. In Angular, we use subscribe() function to get data, while in Flutter, we use then() function or keyword await (very similar to the Promise in Angular).
The pure json object is not convenient. In both Angular and Flutter, we serialise it. The way is to create a unique class for the data, and create a fromJson() to transform json object into the class object.
In Angular, the class looks as below.
In Flutter, it looks as followed.
Now, we put http networking and serialisation together, and we have Provider (or Service).
The Service in Angular is presented as below.
The Provider in Flutter is shown as followed.
In the examples, we can find there are 2 major difference between Service and Provider.
- Service can be provided in root by adding decorator, while Provider can’t do it. In Flutter, we have to provide the Provider in Widget by hand.
- The data is stocked in Provider, while not in Service. Actually, we can save data in Service, and it’s better to do it when you need to share data among different components. Since the data is stocked in Provider, we need to notify widget while the data is updated.
It’s annoying to write the fromJson() each time when we create a new class. Flutter provides a runner, and it can generate this function for us. It saves our time, just use it. (check the official document)
Presentation of data
We have fetched data and serialise it. It’s time to show it.
In Angular, since we have provided the Service in root, we can inject it easily by adding it into the constructor. In this example, we fetch the notebook with id 1 during the initialisation of Component.
In Flutter, it will be more difficult.
First, we need to add the Provider in Widget tree. The Provider must be placed at the parent widget. In this example, NotebookScreen is the parent widget of NotebookCard. You can provide it in the root of widget tree, too. But, the codes can be hard to read after adding more and more Providers.
Secondly, we call the fetch data function in initState(), like Angular. Unlike Angular, we need to get the data in the Provider. There is a perfect life-cycle function for us to do it: didChangeDependencies(). NotebookCard depends on NotebookProvider. After NotebookProvider fetches data, it changes, and it notifies NotebookCard. At this moment, the didChangeDependencies() in NotebookCard is trigged. So we can get the data in this function.
Finally, the build() function in NotebookCard runs. I think the build() is similar to the html file in Angular. But, Flutter doesn’t use html or css. All the codes is written in Dart. Don’t be afraid, it’s easy to get used to it.
Conclusion
Flutter is easy to install and to use. Compared with Angular, they share the same state management, but Service in Angular is easier than Provider in Flutter. Angular takes advantage of html and css. The presentation is much easier than Flutter. But, Flutter can build IOS and Android at the same time. It can build the web application and Linux app in the future. This cross-platform ability makes it so charming.
