Why Flutter
User experience is consistent with native: It has been more than three years since Google released Flutter in 2017. The biggest difference between it and other cross-platform frameworks is that it can be compiled directly into native applications. This makes the size of the app close to that of the native app, with almost the same performance.
Shorten development time: With more than 3 years of development, Flutter ecosystem has been gradually improved and has been used on large clients such as Taobao, Xianyu and Zhihu. With the release of Version 2.0, Flutter can meet the needs of many business scenarios, including e-commerce, social networking, live streaming, and corporate office. At the same time, the development of multiple release, improve the efficiency of research and development, so that business functions can be launched on Android and iOS platforms at the same time.
For the future, Flutter supports all platforms: In addition to Android and iOS, Flutter also runs on MacOS, Linux and Windows. Fuchsia, Google’s open source Internet of Things operating system, also supports Flutter by default for the 5G era. The application of Flutter can be directly run on iot devices including smart wearables, smart homes, smart parks and vehicle-mounted systems equipped with Fuchsia system in the future.
To date, Flutter has many advantages and can help businesses deliver their services to users quickly.
For the above reasons, I chose Flutter as the client technology. A small but comprehensive application to tease out Flutter’s strengths and weaknesses in mobile application development.
A small and complete client
The most straightforward way to validate a technology is to do a prototype project with it. For front-end applications, the following aspects need to be verified first:
- The way and efficiency of UI/UX drawing
- How data, business logic and UI components are decoupled
- The degree of customization of the UI component library
- Architectural patterns
- Performance, compatibility, stability
- Unit testing
- Development tool Maturity
- Debugging can be
- Online log collection mode
The stock analysis client mainly takes data from a background service, processes it and charts it on the page. It doesn’t have much functionality, but you can validate the above aspects.
The client includes the following functions:
List of investment models (data loading) :
Investment model To simulate investment (Flutter diagram) :
Investment model Simulating investment (Web chart) :
Stock Details (Web page) :
Advantages and Disadvantages
advantage
The way and efficiency of UI/UX drawing
Declarative UI descriptions are efficient: Engineers familiar with Web development or Swift development can easily get started. Also, because the UI drawing of Flutter is completely done by Flutter itself, independent of platform components, it can be consistent with Android and iOS. I used iPhone emulator in development, packaged and released to Android phones with the same interface effect as iPhone emulator, greatly saving the time of dual-platform debugging and adaptation.
Decoupling of data, business logic, and UI components
Native support for decoupling: The concept of StatelessWidgets and StatusfulWidgets is a good way to decouple UI components from business components. At the same time, Class is a first-class citizen concept, so that the application development is object-oriented, can achieve high cohesion and low coupling.
The degree of customization of the UI component library
Native Component leveling: The Material component library provides theme customization capabilities, as well as a wealth of configurable parameters for UI components. You can customize from the latitude of the topic, the latitude of the component.
Performance, compatibility, stability
The size of the package is small: I was pleasantly surprised that the APP was only 18MB in size when packaged. That’s a big improvement over RN, which starts at 30MB+.
Performance close to native: 100 + data list loading without delay; 1500+ nodes chart animation switch smoothly without lag. From a user experience perspective, performance is close to native. According to industry reviews, the performance cost of the native Flutter is 1.2 times and that of the RN is 15 times.
Good UI/UX compatibility: iPhone emulator environment can be released directly to Android phones for testing. Components adapt to different screen sizes without development time adaptation.
Development tool Maturity
Development tools are complete: The command line tools and IDE plug-ins provided by Flutter support the entire APP development lifecycle. At the same time, editor plug-in can help developers to quickly rebuild the code, improve the quality of the code.
insufficient
Architectural patterns
Lack of standard architectural patterns: As a UI framework focused on THE UI, like RN and Vue, there is no clear solution at the business logic and data layer management level. Currently, mainstream one-way data flow models and responsive models in the industry have corresponding Flutter versions, but there is a lack of a complete Framework to ensure that the architecture will not be corrupted during the long-term development of the project. This requires the Architects of the Flutter project to define the appropriate model, formulate the project development specifications, reach consensus with the development team, and implement code quality inspection mechanisms into the pipeline and quality control tools before launching the project.
Some native open source UI components are not adapted
Lack of open source UI components: None of the mainstream open source chart libraries were adapted to the Flutter platform when developing stock charts. It is recommended that the architect fully evaluate the UI components needed before the project begins. For features that do not have corresponding open source components, do a thorough evaluation and allow adequate development time.
How debuggable is it
The error message is not clear: The thermal overload feature of the Flutter brings great efficiency to development. This feature is familiar to Web engineers and comes as no surprise. Instead, it’s a vague type of error that sometimes overwhelms people.
Declarative UIs are nested too deeply and cause syntax errors: In RN, declarative UIs use htML-like tags to quickly locate unclosed elements. Flutter, on the other hand, uses a “()” closure. This makes it difficult to quickly locate a mismatch and often takes a long time to adjust.
Online Log Collection
Currently, the industry lacks a sound log collection method. The architect should capture latitude and metrics based on the project definition during the project startup phase to ensure that online performance is perceived.
Items to be verified
Due to time reasons, the unit tests were not verified in this development and will be added after verification.
conclusion
Flutter is a cross-platform UI framework that can be used not only on Android, iOS, Web and PC, but also for future IoT devices in the 5G era. It can solve the problems faced by enterprises in the 5G era of “multi-size screen” and “low performance” IoT device development and application.
At the same time, developing multiple platform release features at once greatly improves delivery efficiency. This enables enterprises to provide services to end users in a shorter time and enhance their own industry competitiveness.
It is recommended that enterprise r&d teams introduce Flutter as a mobile development technology to improve business delivery efficiency, both now and in the future.
Postscript: What did you do in two days
The first day
3 hours: According to the installation environment of Flutter Chinese. Because of network problems, can not directly use the official website service. Most of the time is spent finding and configuring domestic network images. Here recommend tsinghua University mirror source. After troubleshooting network problems, the project was successfully installed and initialized. The command line tools that Flutter provides include application lifecycle support for initialization, package management, debug run, build, etc. Engineers familiar with Flutter command line tools can efficiently complete application development tasks from the command line.
30 minutes: Initialize the Flutter project and create a code repository on GitHub. Use the GitHub Issue feature with backend conventions for simple project management such as bug fixes and new feature development.
1 hour: Learn Dart in Y mins. Because I’m familiar with Javascript and Typescript myself, I don’t have a lot of cognitive barriers. I just read and write.
1 hour: Learn the basic concepts of Flutter components and the purpose of StatefulWidgets and StatelessWidgets. Simply put: StatelessWidgets for pure UI components; Use StatefulWidget for business logic. This is the built-in convention for UI and business decoupling. This design has the advantage of separating UI components from business components at the framework level, avoiding UI and business coupling at the root.
4 hours: Developing business functions, most of the time spent on familiar Material component interfaces and searching for corresponding components in the community. The layout and list components are used the most. Flutter’s hot overloading technology allows you to see the effects of code changes directly in the simulator, avoiding recompilation like native application development. This feature greatly improves development efficiency and experience. However, the error suggestion of Flutter is slightly inadequate, especially when the type error occurs. It only indicates type incompatibility, which makes people confused.
1 hour: Release the package according to official documents. Most of the time is spent creating and configuring keys for Android, and changing package names. Packaged and released through dandelion’s test platform. Note: Dandelion is blocked by wechat and needs to be opened in the browser.
The second day
4 hours: Find the right chart component. The old problem with Flutter ecology is that well-known chart libraries like EChart or HighChart on the Web and Native end do not have corresponding versions of Flutter. Here are three alternatives:
- Developed using the base Flutter UI component
- Meet minimal business needs with simple charting components
- Embed EChart or HighChart using WebView
In my application, I have tried “using simple components to meet minimum business requirements” and “WebView embedding” on the “Model Simulation” page respectively.
- The “Simple Component” uses Flutter to draw the native interface for smoother interaction and higher performance. This method can be done in milliseconds to draw 1500+ nodes to the chart, animation without lag.
- WebView embedding is slow to load but powerful. Both Web and APP can be used in the first development. In the later stage, the obvious loading speed can be improved by directly embedding local static H5 resources and only loading data.
2 hours: Adjust other page interfaces to abstract UI components. Here’s an introduction to VSCodeFlutter plug-in, provides rich refactoring functions. It can quickly abstract common UI components mixed in state fulwidgets into StatelessWidgets, greatly improving the efficiency of reconstruction.
6 hours: Put this article together.