background

Flutter has become the trend of The Times. I will not go into more details about Flutter and its comparative advantages and disadvantages. After all, I am just a beginner, and only my own feelings and summary after use are the most direct, right? Therefore, we might as well hold the mentality of learning to try this cross-end solution on behalf of the future.

Then, since we want to try, certainly can’t all in, after all, if everyone’s old project is overturned, no one can handle the risk, including ali, Tencent and other big companies. And new projects are generally in a hurry, we are not allowed to step on the hole slowly. Of course, if the company has some small projects and the cycle is not very urgent, I think it is possible to practice with Flutter. Of course, the premise is that your leaders are also interested in cutting-edge technology and dare to let you play with Flutter. Then eliminate the above situation, we most application scenarios or in existing projects, in some deep pages try to mix, so the industry in general, still adopt the mixed solution, as far as I know, including idle fish, hello, Meituan producers, such as from their sharing information, did was just trying to stage, in part, the plan of the mix of In this way, new technologies are explored with little impact on existing functions.

Well, the above said so much, the following to share these two days, I searched Baidu, Google all kinds of large and small articles, stepped on all kinds of strange, puzzling pit, finally collected seven dragon balls, call the dragon story. 🤣 🤣 🤣

Flutter integrates into existing native applications,Flutter officialThree options are offered:

  • Plan 1: Use the script written by the Flutter official for us to achieve simple integration. I have tried it once. It is very convenient, but there is an obvious disadvantage that all the members in the group should have the Flutter environment. And what we want is for the rest of the group to be integrated without feeling.
  • Solution 2: For teams that do not use Cocoapods, integrate completely manually and manually modify the properties of the framework. However, most teams in China still use Cocoapods, so there are not many for this.
  • Solution 3: Integrate with Cocoapods, but with a local repository, which is unfriendly and difficult to version control.

In summary, if you want to play on your own, follow the official Flutter solution, but if you want to develop with a team and allow other team members to develop without feeling the need, you need to use Cocoapods’ private libraries. Now we’re going to do some actual combat, along with some principles or considerations.

In actual combat

Create a Flutter Module

The first step is to create the Flutter module (please note that the module is not the project, I didn’t notice it at the very beginning, I tried the project for a long time, so I couldn’t find the framework we needed later)

CD to your directory, enter flutter create –template module my_flutter(my_flutter is the module name, you can choose it yourself)

cd some/path/
flutter create --template module my_flutter
Copy the code

After creating the flutter module, we can use VSCode or Android Studio to run the flutter module, because flutter comes with a demo, unlike iOS, which has a blank page.

Second, generate the framework

From the perspective of flutter integration, we only need a few files.

Simply put, with these files the rest of our team can integrate Flutter. These files are also easy to generate with the command “flutter build ios”. The generated framework is stored in a hidden folder (.ios) of the Flutter project that you created.

Initial verification, we only need these files, of course, these files we need to copy it into the POD warehouse designated directory, here we can use a script to complete. Build_path = build_path = build_path = build_path = build_path = build_path Debug is used for emulator debugging, release is used for real machine debugging or packaging.

#! / bin/sh # # terminal input echo $PATH to see the PATH PATH chmod 755 build. Sh is get # PATH = / usr/local/bin: / usr/bin: / bin: / usr/sbin, / sbin # export PATH export LC_ALL=en_US.UTF-8 export LANG=en_US.UTF-8 echo "Clean old build" find . -d -name "build" | xargs rm -rf "Flutter Packages get echo" start build release for ios" flutter build ios --debug echo "Build release completed" echo "start processing framework and resource files" build_path=".. /FlutterMixDemo/build_flutter_ios" if [ -d ${build_path} ]; then find ${build_path} -name \*.framework | xargs rm -rf #find ${build_path} -name \*.h | xargs rm -rf #find ${build_path} -name \*.m | xargs rm -rf else mkdir ${build_path} fi #cp -r build/ios/Release-iphoneos/*/*.framework ${build_path} cp -r .ios/Flutter/App.framework ${build_path} cp -r .ios/Flutter/engine/Flutter.framework ${build_path} cp -r .ios/Flutter/FlutterPluginRegistrant/Classes/GeneratedPluginRegistrant.* ${build_path} # cd .. /FlutterMixDemo # pod install echo doneCopy the code

Create a Pod private library

Later we need to put the Flutter Module into the Pod private library so that all members of the group can integrate with one click. Therefore, we need to create the Pod private library. Of course, you can skip this Part if you already know how to do it. I’m going to do a full integration here.

referencePod Official DocumentationWatch its first step. Alas, that’s how careless people like me tread holes.

Note that it is the Spec repository, not our source repository. This is the difference between private and open source libraries. Private libraries require us to manage the spec repository ourselves.

The following steps are easy, follow the official documentation. It is recommended to put the repository on GitLab rather than Github (although github is already a free private repository) because the speed of the pod repo push or pod install will make you faint. I’ve wasted a lot of valuable time, and I hope you don’t make the same mistake I did.

  • The first step is to create a private library, pod lib create REPO_NAME, to put our Flutter library
  • Step 2, create a spec library to hold our PodSpec files
  • Pod repo add REPO_NAME SOURCE_URL (REPO_NAME: library name, SOURCE_URL: address of the spec library, ending with.git). Pod repo add flutterspec http://192.168.100.4/zsy/flutterspec.git
  • Repos / ~/.cocoapods/repos/ is a new repository, but it should be an empty folder. We link the remote spec library here, and the library needs to be submitted, like a README, to initialize it.
  • Pod lib lint SPEC_NAME. Podspec –verbose –skip-import-validation check pod lib lint SPEC_NAME. Podspec –verbose –skip-import-validation check Pod repo then pushes REPO_NAME SPEC_NAME. Podspec –verbose –skip-import-validation to push our podspec file to our private library. After success, go back to our ~/.cocoapods/repos/ and see that the empty folder has a specific version library.
  • Ok, private library creation is complete.

Four, one key import

platform :ios, '11.0' source 'http://192.168.100.4/zsy/flutterspec.git' target 'FlutterIOS do # Comment on the line if you don' t want to use dynamic frameworks use_frameworks! # Pods for FlutterIOS pod 'flutter_test_SDK ', '0.1.4' endCopy the code

Note that since it is a private library, our pod file needs a source link, which is our spec repository link, and then pod install.

Back in our demo project, you can see that it’s already integrated.

As for how to use it, it’s pretty simple,Official Documentation of FlutterIt’s very detailed. I copied it.

Register the FLUTTER engine first.

import UIKit
import flutter_test_sdk

@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
    
    lazy var flutterEngine = FlutterEngine(name: "my flutter engine")
    
    override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        flutterEngine.run()
        GeneratedPluginRegistrant.register(with: self.flutterEngine)
        
        self.window?.backgroundColor = UIColor.white
        self.window?.rootViewController = ViewController()
        
        self.window?.makeKeyAndVisible()
        return true
    }    
}
Copy the code

Exhale the FlutterViewController where the Flutter page needs to be called.

import UIKit
import flutter_test_sdk

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
        let flutterVC = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
        present(flutterVC, animated: true, completion: nil)
    }

}
Copy the code

Let’s take a look at the demo. Perfect exhale from the Flutter page. But we can see that after we dismiss, we exhale again, the Flutter page doesn’t actually initialize, but of course that’s a later story.

conclusion

After componentization is completed, the following is pure development work. Students who make Flutter concentrate on Flutter, while students who are native do not need to care about the Flutter environment. Of course, this is the first step of the long march, and the journey behind the pit remains for me to slowly continue to record 😂😂😂.

Read feel useful to help a thumbs up 😁😁😁, code word is not easy, and see and cherish.