First, let’s talk about the development process of Flutter application.

The first step, of course, is new construction. According to my Close Pit Guide, the editor strongly recommends using Google’s own Android Studio, which is much better in terms of plugin support and speed (compared to VS Code).

Then there is the introduction of third-party libraries. Here I use a few basic libraries, including icon library, network library, JSON-to-Model, and local storage.

cupertino_icons
http
json_annotation
shared_preferences
Copy the code

Flutter currently does not provide a good jSON-to-Model solution. Json_annotation is officially recommended as the “most convenient” Model library, but it still requires scripting to generate jSON-to-Model classes. This is obviously not as efficient as dynamic conversion.

I made a simple storage layer between the network layer and the UI layer to cache data for network requests.

Now it’s time to start coding. As an iOS developer who knows a bit about the front end, Dart’s syntax is pretty quick to pick up, but the layers of nesting are disgusting, and Android Studio’s code formatting seems erratic.

The second is the layout of Flutter. The general layout is very similar to the front-end layout framework, but it is “too componentized”. Divs have all the Padding, Center, and Align attributes, so if your layout is complex, you may need to nest multiple layout widgets.

If you’re a native developer, it’s natural to think of TableView and CollectionView as UI controls that display, control, and handle Cell clicks. Flutter splits the control into multiple components. ListView and GridView only take care of the layout. Click events and so on need to be implemented by other controls.

Flutter widgets UI, layout, and functionality as much as possible. I’m not sure if this is for performance optimization or other reasons. Of course, proper componentization is good to make the control flexible enough, but also to improve performance. However, decomposition of such a small granularity seems to present some usage problems, including the above mentioned multi-layer nesting.

When your code is ready, start debugging it. Debugging the Flutter is pleasurable, and pressing the save shortcut on any changes you make will instantly see what the modifications look like (ideally). The good news is that Android Studio also provides debugging tools that are powerful enough to help us out, but VS Code can do very little in this area, at least for now.

If you need to debug the UI, try joining

import 'package:flutter/rendering.dart';
debugPaintSizeEnabled= true;
Copy the code

The project was developed and then packaged for release. The Flutter operates in two modes. The Debug mode provides hot updates and other features for rapid development, but the operation is inefficient. Release mode removes useless features and runs in AOT mode, which is more efficient.

flutter build ios
Copy the code

Build the iOS version of release, then go to Xcode and set the app Icon, launch page, version number, certificate, etc., just like a normal native app. Note that if your app uses a non-HTTPS protocol, you still need to modify the security rules in Plist, as do location and camera permissions.

At this point, my Flutter iOS project has been developed. The App Storewas approved in about two days. It is clear that Apple’s current attitude towards Flutter is benign, but its future policy is still unknown.

In the process of developing this project, I encountered several problems that I would like to share with you.

The first is the layout.

I ended up using a Stack, floating the search box over the ListView, and then placing a Container on the ListView and setting the distance to the top. The end result is ok, but I think the layout is clearly not elegant and difficult to read. Please let me know if there is a better solution.

The second is that there are still many system-level functions that cannot be implemented. For example, the StatusBar color, I want the front page to be white and the search page to be black. But right now it seems like you can only set a fixed color. Try using SystemChrome to force the color of the StatusBar, but when you jump to the search page the color will turn black again, and when you return it will not automatically turn white. Attempts to find an event like ViewWillAppear have been fruitless, and the only way to trigger color-changing code is through a callback from the next page.

Notification is also a feature that is currently unavailable. At present, the official firebase_messaging plug-in has been provided for receiving push messages, but it cannot send local push messages, so the function of small dots cannot be realized. Of course we can still do this by calling native methods.

To sum up.

At the UI level, Flutter can achieve almost anything you want because it provides a platform-independent rendering engine. But before you do that, you might want to study its layout widgets and put up with the multi-layer nested code style for a while (maybe forever). Of course, it is also a good way to componentize your pages appropriately.

On the logical level, the authorities have launched a considerable number of base libraries, handling basic transactions without particularly big problems. However, we hope that a number of useful third-party libraries will emerge to enrich the Flutter development ecosystem.

The next post will be a review of the iOS native app versus Flutter.

Finally put a project making address: https://github.com/jihongboo/Aireport_Flutter is now on AppStore: https://itunes.apple.com/cn/app/aireport-flutter/id1390259423?mt=8