background

Big and small factories are engaged in Flutter, I would like to ask if you are in a panic!

Most of the domestic mixed integration scheme articles are too old, the reference value is not high, and it is easy to make beginners head big.

preface

This article does not explain the principles, advantages, development status and other issues related to Flutter. It only introduces the practice of Flutter mixed development with existing iOS projects and some problems in the process of mixing. At present, two pages of mixed development have been completed, waiting for user inspection.

The development tools

  1. Xcode version10.2
  2. Visual Studio Code 1.41.0

Environment depends on

The configuration process of the Flutter development environment will not be discussed in detail. The documentation on the Flutter website is quite detailed.

The current Flutter SDK version is V1.9.1 + Hotfix.6

Execute the Flutter Doctor to check the environment configuration

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel unknown, v1.9.1+hotfix.6, on Mac OS X 10.14.4 18E226,
    locale zh-Hans-CN)
 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] Xcode - develop forIOS and macOS (Xcode 10.2)! CocoaPods out of date (1.6.0 is recommended). CocoaPods is used to retrieve the iOS and macOS platform sides plugin code  that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To upgrade: Sudo gem install Cocoapods [✓] Android Studio (version 3.5) [✓] VS Code (version 1.41.0) [✓] Connected device (1) available) ! Doctor found issuesin 2 categories.

Copy the code

As you can see, CocoaPods is required to be 1.6.0 or higher. Currently, we are using 1.5.3, but this is a warning and will not affect you much.

Hybrid scheme

The mixed scheme officially underwent several versions of changes. At first, the mixed scheme was troublesome and the official document was not very detailed. However, after the release of Flutter1.12, the mixed scheme document was updated and the two mixed schemes were easy to understand. Here we also use the official recommended solution (using CocoaPods dependency management).

  • Create the Flutter module (the code for the Flutter page is here).
cd some/path/
flutter create --template module my_flutter
Copy the code

It is recommended that the Flutter module be placed in the same directory as the iOS engineering module

├─ my_├ ─ └ /Copy the code
  • Modify Podfile
  1. CocoaPods relies on the local Flutter module
flutter_application_path = '.. /my_flutter'
 load File.join(flutter_application_path, '.ios'.'Flutter'.'podhelper.rb')
Copy the code
  1. Each target is embedded into the Flutter
target 'MyApp' do
   install_all_flutter_pods(flutter_application_path)
 end
Copy the code
  1. performpod installThis is throughpodhelper.rbThe script inserts the corresponding artifacts in the.ios directory of the Flutter project into the ios project.
  • Flutter. Framework (Flutter engine Bundle)
  • App. Framework (Dart Code)
  • Flutter plugins

To generate the related products, remember to perform the Flutter build ios operation under the Flutter module.

By following the steps above we can see that the Flutter product has been integrated into the iOS project

Analyzing dependencies
Fetching podspec for`Flutter` from `.. /.. /finance-flutter-module/.ios/Flutter/engine` Fetching podspecfor`FlutterPluginRegistrant` from `.. /.. /finance-flutter-module/.ios/Flutter/FlutterPluginRegistrant` Fetching podspecfor`connectivity` from `.. /.. /finance-flutter-module/.ios/Flutter/.symlinks/connectivity/ios` Fetching podspecfor`flutter_boost` from `.. /.. /finance-flutter-module/.ios/Flutter/.symlinks/flutter_boost/ios` Fetching podspecfor`rrd_flutter` from `.. /.. /finance-flutter-module/.ios/Flutter` Fetching podspecfor`url_launcher` from `.. /.. . / finance - flutter - the module/ios/flutter /. Symlinks url_launcher/ios ` Downloading dependencies Installing flutter (1.0.0) Installing FlutterPluginRegistrant (0.0.1) Installing Reachability (3.2) Installing connectivity (0.0.1) Installing Flutter_boost (0.0.2) Installing RRD_FLUTTER (0.0.1) Installing URL_launcher (0.0.1) Generating Pods project Integrating  client projectCopy the code

To solve the error

After completing the mixing, the following error appears in the RUN project

/Build/Products/Debug-iphonesimulator/investment.app/Frameworks/Flutter.framework: Permission denied
Copy the code

This is a Flutter1.9 signature conflict Bug. It was fixed in 1.10.2.

There are two solutions:

  1. performchannel masterorchannel devTo change the firstchannelTo use.
  2. Modify the Flutter SDK file and open itflutter/packages/flutter_tools/bin/xcode_backend.shThe file will be
RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -exec chmod a-w "{}" \;
Copy the code

Replace with

RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -iname '.h' -exec chmod a-w "{}" \;
Copy the code

We adopted the second scheme. After modification, we ran again and found that the project could run. By now, the initial mixing of Flutter and iOS has been completed.

Debug and Hot Reload

It is very convenient to use a terminal or VSCode to debug a flutter page after attach. VSCode is recommended here because it is annoying to switch between the code and the terminal and press R constantly.

bogon:my_flutter yin$ flutter attach
Checking for advertised Dart observatories...
Waiting for a connection from Flutter on iPhone X...
Done.
Syncing files to device iPhone X...                              1,328ms

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild
state), press "R".
An Observatory debugger and profiler on iPhone X is available at:
http://127.0.0.1:63823/uO5BqqTmOrE=/
For a more detailed help message, press "h". To detach, press "d"; to quit,
press "q".
Copy the code

One thing to note here is that the flutter attach may remain in a waiting state

Checking for advertised Dart observatories...
Waiting for a connection from Flutter on iPhone X...
Copy the code

At this point we kill the APP process to restart the connection can be. Attach will be made every time the Native project does Flutter initialization.

conclusion

The solution we are currently using is a hybrid solution officially recommended by Flutter, with both advantages and disadvantages:

  • Advantages: Easy blending integration, blending process many things that Flutter officials have already done for us
  • Disadvantages: Although the iOS project repository and the Flutter Module project repository are separate, the actual operation of the two projects is mutually dependent on each other. This means that both iOS and Android developers have to install a local Flutter environment.

At present, this hybrid solution is suitable for our small team (3 people for iOS and Android). If the team has a large number of people or there is a separate project team for Flutter, this hybrid solution may be cumbersome. Of course, there are some solutions for Flutter hybrid development engineering on the Internet. We will not discuss it here for the time being. If we study it in the future, we will make a supplement

A link to the

Flutter environment configuration

Official mixed documents