introduction
Flutter is Google's open-source UI toolkit that helps developers efficiently build multi-platform applications across mobile, web, desktop, and embedded platforms with a single codebase. Flutter technology has become the key technology construction direction for more and more industry partners, and major domestic manufacturers have also built their own Flutter engineering systems to serve their own business scenarios. Benefits of Flutter technology:
- Improve development efficiency: Double-ended consistency and hot reload can help quickly modify and debug the UI
- Improve delivery efficiency: Ensure that multiple terminals can be released at the same time, and business requirements can be completed by the same deadline
- Improved user experience: Flutter provides a consistent UI on both ends and has Native-like performance
- Labor saving: Save labor costs for design, testing, and development
Since 2020, the Zhenkun Mobile team has faced the following challenges:
- Due to the rapid development of the company's business, including development, product, testing, etc., personnel will be responsible for more than two products at the same time, and we hope that there are solutions to improve the efficiency of development, testing, and delivery
- The company's R&D team is located in Beijing and Shanghai, and although the whole company adopts the scaled agile framework SAFe for project management, we still need to communicate with students at different ends in the mobile team for product, testing, and design, and we hope to reduce the cost of communication
After technical research by the mobile team, we decided to fully embrace Flutter and improve the R&D efficiency of mobile.
The cost and risk of fully switching apps to Flutter is high, and the current prudent approach is to gradually migrate Native to Flutter, and keep Native and Flutter coexisting in a hybrid manner according to business and technical needs. This article mainly introduces the interaction between Flutter and native in the practice of Flutter-Native hybrid development in the project: page jumping, data processing, etc.
Selection of hybrid technology solutions
FlutterBoost is a Flutter plugin that is designed to use Flutter like a webview, making it easy to provide a Flutter hybrid integration solution for existing native applications. FlutterBoost adopts the implementation method of sharing engine, and the main idea is that the Native Container drives the Flutter Server-Side Container Container through messages, so as to achieve the synchronization purpose of Native Container and Flutter Container. The content rendered by Flutter is de-channeled by the Native container. FlutterBoost helps with page mapping and redirects, and developers only need to care about the page name and parameters (usually URLs). It has the following advantages:
- Multi-purpose hybrid schemes can be reused
- Support for more complex blending modes
- For example, it supports a non-intrusive solution for the main page tab: it no longer relies on modifying Flutter's scheme
- The Universal Pages Lifecycle is supported
- A unified and clear design concept
Global Router Build
在Native和Flutter混合开发项目中,首先我们需要解决的就是利用FlutterBoost构建一个全局Router,统一管理Native和Native、Native和Flutter,Flutter和Flutter之间的⻚面跳转。
To complete the development of the new page in the Flutter Module, you need to define the relevant routes in main.dart, and the code is as follows:
原生如何打开Flutter页面(Activity或者Fragment形弍 通过BoostFlutterActivity和FlutterFragment来将Flutter页面打开。
具体实现:定义FlutterRouter类用来打开Flutter Activity和Fragment,其中 flutterRouter map对应main.dart中定义的所有路由,即flutterRouter map包含的路由通过FlutterBoost调用。 在后面我们会将openPageByUrl添加原生路由的处理。
在Flutter模块中页面跳转不使用Flutter原生提供的 Navigator实现跳转,而采用FlutterBoost来统一处理。 FlutterBoost打开页面的方法为FlutterBoost.singleton.open,该方法会调用plugin中的openPage方法,而openPage最终调用到Native层中FlutterBoost初始化所定义的INativeRouter
在INativeRouter实现中将路由处理也交给之前定义的FlutterRouter,完善openPageByUrl方法来统一处理所有路由,那么最终FlutterRouter可以用来处理所有Native和Flutter路由。
The handling of Native routes in the above code is special for some routes in order to be compatible with the previous code.
Global Router parameters
During the route redirection process, we also need to pay attention to how the parameters are passed and received. The parameters include basic types, list data, and object data.
1. Native -> Flutter
Parameters from the Native side are put into the SerializableMap and passed to Flutter. In the Flutter module we can directly obtain primitive types, etc., and the object data is obtained by passing the json
2. Flutter -> Native
If it is a simple Map parameter, it will be handled directly by the ARouter in the FlutterRouter without special processing. If the pass is an object, it will involve json conversion, in our project is to maintain the original business code to use the transfer of object data, but it is recommended that all subsequent parameters be passed in the form of Map, which can ensure the uniformity of FlutterRouter processing.
startActivityForResult处理
In Android we often come across this scenario: start another Activity and accept the returned result. So how do you handle this situation in a cross-module?
1. Native⻚面打开Flutter⻚面并获取返回数据
FlutterBoost通过FlutterBoost.singleton.closeCurrent(result: result, exts: exts); 方法来关闭页面，该方法会调用FlutterBoostPlugin中的closePage方法。
If the final result is not empty, the setResult method will be called to return the result. The key of the corresponding result is RESULT_KEY = "_flutter_result_";
所以对于startActivityForResult启动的Flutter页面,只需要将返回值放入result map中即可
2. Flutter⻚面打开Native⻚面并获取返回数据
In Flutter, we can directly get the return value after opening the page, here we only need to focus on the specific key-value in the return value map.
在FlutterBoostpon页面是通过BoostFlutterActiv Theity of the world 看到最返回Map Songrequest Thecode和resultCode对应的key为_requestCode__和_resultCode__
MethodChannel交互
Flutter platform-specific API support doesn't rely on code generation, but instead on a flexible way of messaging:
- The Flutter part of the app sends messages to the host (iOS or Android) where its app is located via a platform channel
- The host listens to the platform channel and receives the message. It then calls the platform-specific API (using the native programming language) and sends the response back to the client, the Flutter part of the application
When FlutterBoost is initialized, a MethodChannel can be created in the BoostLifecycleListener to provide a channel to communicate with the client
在FlutterBoost中创建MethodChannel
Summary:
This article mainly introduces the interaction between Native and Flutter in the process of Flutter hybrid development, including page calling, parameter passing, and data exchange. In the hybrid development process, we implemented the consistency of global Router processing in different modules, and introduced the parameter processing, callback, and MethodChannel interaction in the process of page jumping.
After the implementation of Flutter hybrid development, the main experience is as follows:
- Flutter has a very good experience in UI writing, although it is a little unaccustomed to writing at first, but the development efficiency is very high after becoming proficient
- For complex lists, the development experience and performance have been greatly improved
- Reduce the testing time, because the students do not have to test carefully at each end, especially in terms of UI
- Originally, there were some functions in the project that could not be migrated to Flutter for the time being (such as third-party UI libraries, SDK libraries that do not support Flutter, etc.), and the native Activity nested Flutter Fragment was used in the project to solve the problem, but this virtually increased the interaction between the native and Flutter
- When it comes to interacting with the native part, both sides need to agree on it, and when modifying common parts such as methodchannel, you need to pay attention to whether it will affect other sides
About the Author
Li Liang, Senior R&D Engineer of Zhenkun Xing Mobile Terminal, joined Zhenkun Xing in 2019.
Source-WeChat public account: product technical team
Source: https://mp.weixin.qq.com/s/FzJkLufrADkGQQQVG6mhOw