With Native works, developers are unlikely to create a completely new Flutter project to rewrite the entire product. Therefore, the Flutter project will include existing Native works, which brings a series of problems:

  • Build packaging problem: After the introduction of Flutter, Native projects cannot be independently compiled and constructed due to their dependence and coupling. In the Flutter environment, the construction of the project starts from the construction command of the Flutter, and the execution process includes the construction of the Native project. The developer must configure a complete Flutter operation environment to complete the whole process.
  • Reduced development efficiency due to mixed compilation: In the process of transformation of Flutter, many businesses are bound to be developed using Native. The modification of the engineering structure will make the development impossible in the pure Native environment, and the adaptation to the Flutter engineering structure will cause unnecessary construction steps for the pure Native development. Resulting in the reduction of development efficiency.

expect

Hopefully, when the project is mixed, students who have not developed a FLUTTER can completely get rid of the flutter without the need for the FLUTTER project code and install the flutter environment. The team members who wrote Flutter were able to mix them up to make it easier to develop and debug.

We found that both iOS and Android projects rely on Flutter files:

  • Flutter library and engine:Flutter.framework
  • Flutter Engineering products:App.framework
  • Flutter Plugin: all sorts of compiled Flutter PluginThe plugin framework

Then we only need to extract the compilation results of these three parts and package them into an SDK dependent form to provide to Native engineering, so that Native engineering can remove its direct dependence on Flutter engineering.

Common introduction

1. Direct introduction

Native projects are imported directly through Cocoapods, depending on the Flutter environment. The import code in Podfile is as follows:

flutter_application_path = '.. /flutter_module' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') platform :ios, '9.0' target 'NativeDemo' do install_all_FLutter_PODS (Flutter_application_path) USe_frameworks! endCopy the code

Perform pod install

Open the native project for use

#import <Flutter/Flutter.h>

FlutterViewController *flutterVC = [[FlutterViewController alloc] init];
[self presentViewController:flutterVC animated:YES completion:nil];
Copy the code

2. Import in Framework mode

The Flutter project is compiled into the framework by command and then imported into the native project

flutter build ios-framework --output=.. /flutter_appCopy the code

When the compilation is complete, it is compiledDebug, Profile, and ReleaseFramework for three environments

  • DebugWith debugging function
  • ProfileIt has both debugging function of DEBUG and release performance
  • ReleasePublishing environment

Each environment contains app. xcframework and Flutter. Xcframework. App.xcframework is our Flutter program code

If there is no Flutter environment on the computer, can you run the Flutter code normally?

Add the framework to the project

Then run the native project and find that the Flutter can be successfully run and used.

3. Import through Cocoapods

Go to the flutter_module directory and compile

flutter build ios-framework --cocoapods --output=.. /flutter_appCopy the code

The difference is that the flutter engine is flutter. Podspec

Then in the native project through POD introduction:

pod 'Flutter',: podspec => 'flutter_app/Profile/Flutter.podspec'
Copy the code

Native project added app.xcFramework:

There is no problem running native projects as well.

Optimize the introduction of Cocoapods to achieve engineering automation

On the one hand, automation reduces labor costs and also reduces human error. The other side is to do a good version control, automated form of version control.

Create a project warehouse

This contains native and Flutter engineering code

Execute command to create warehouse:

You will be prompted to enter your Github account and password, which are now configured using Token. Go to Settings->Developer Settings and create a personal token

After the token is created, copy the token and press Enter on the terminal

You can see that the repository has been successfully created

Add native projects to the repository

Execute the commands in sequence:

git add.
git commit -m ""
git push
Copy the code

Once successful, you can see that the repository contains the project code

Adding automation Scripts

Script code

Here the script is executed every time the push code is executed

Name: FlutterCI #CI name on: [push] Jobs: check: name: Test on ${{matrix. OS}} # run on MacOS runs-on: MacOS -latest steps: -uses: Actions /checkout@v1 # Tripartite Flutter Action, which can configure a flutter environment on the server - uses: subosito/flutter-action@v1 with: flutter-version: '2.5.3' Channel: 'Stable' # Something we want CI to do! - run: cd flutter_module && flutter build ios-framework --cocoapods --output=.. /NativeDemo/Flutter - run: | git add . git commit -m 'update flutter framework' - name: Push changes uses: ad-m/github-push-action@master with: github_token: ${{ secrets.GITHUB_TOKEN }}Copy the code

After adding the script you can see that the Flutter project is being compiled

Compilation is done

A folder containing the Debug, Profile, and Release frameworks has been added to the native project.

Pull remote code locally

git pull
Copy the code

Configuration cocoapods

Configure cocoapods in your project just as you did importing the project from Cocoapods in your Podfile

Platform :ios, '9.0' Target 'NativeDemo' do use_frameworks! pod 'Flutter',:podspec => 'Flutter/Debug/Flutter.podspec' endCopy the code

Then running the project is no problem, indicating that the configuration is successful. And then do it in sequence

git add.
git commit -m ""
git push
Copy the code

After the push succeeds, you can see that the script starts building automatically again

Note: This is just a simple project. There are many factors to consider if a large native project is to embed Flutter. Every time a Release goes live, remember to select the framework inside Release.