The first trial of incorporating Flutter into iOS native projects

background

Our company, which has been developing iOS projects in Objective-C, recently proposed to develop new features with Flutter, a cross-platform hybrid language, and plans to gradually transition to flutter projects. I spent a whole day studying the integration of Flutter in Objective-C. Here I share the process of exploration:

Refer to the official Flutter documentation

A, install,Flutter SDK

1. Download the latest versionFlutter SDK

Flutter_macos_2. 2.3 stable. Zip

2. Decompress the downloaded SDK to an appropriate directory

cdUnzip ~ / Downloads / / Users/Jim flutter_macos_2. 2.3 - stable. ZipCopy the code

3. Add a FLUTTER environment variable

3.1 in.zshrcAdd the following line of code to thezsh)

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

3.2 Verifying the configuration is successful

echo $PATH

3.3 check theflutter 和 dart

 $ which flutter dart
# print:
  /path-to-flutter-sdk/bin/flutter
  /path-to-flutter-sdk/bin/dart
Copy the code

If the result of your operation is as above, the installation is successful!

2. IOS configuration

1. Download and install the latest version of Xcode from AppStore;

2. Configure Xcode command-line tools and run the following command on the terminal:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
Copy the code

Install and configure development toolsVisual Studio Code

VS Code is a lightweight editor that supports the implementation and debugging of Flutter app.

1, install,

Download the latest version: After downloading Visual Studio Code, double click to install!

2, installation,Flutter and DartThe plug-in

1. Start VS Code.
2. Invoke View > Command Palette… .
3. Type “install”, and select Extensions: Install Extensions.
4. Type “flutter” in the extensions search field, select Flutter in the list, and click Install. This also installs the required Dart plugin.

3, use,Flutter doctorVerify that the configuration is successful

1. Invoke View > Command Palette… .
2. Type “doctor”, and select the Flutter: Run Flutter Doctor.
3. Review the output in the OUTPUT pane for any issues. Make sure to select Flutter from the dropdown in the different Output Options.

4. Test drive

4.1 create App

1. Invoke View > Command Palette.
2. Type “flutter”, and select the Flutter: New Application Project.
3. Create or select the parent directory for the new project folder.
4. Enter a project name, such as myapp, and press Enter.
5. Wait for project creation to complete and the main.dartThe file to appear.,

4.2 run the App

4.2.1 Viewing the status Bar at the bottom of VS Code

4.2.2 Selecting devices

From the Device Selector field, select a Device, and if the Device doesn’t exist, click No Devices to create an emulator.

Holdings run

Invoke Run > Start Debugging or press F5.

Third, the nativeObjective-CProject integrationFlutter

Flutter can be incrementally added to existing iOS applications as an embedded framework.

1, will develop goodFlutterThe project is placed in the same directory as the original project;

Some/path / ├ ─ ─ my_flutter / │ └ ─ ─ the ios / │ └ ─ ─ Flutter / │ └ ─ ─ podhelper. Rb └ ─ ─ MyApp / └ ─ ─ PodfileCopy the code

2, Use theCocoaPods dependency manager and installed Flutter SDK

In 2.1,PodfileAdd the following code to:

flutter_application_path = '.. /my_flutter' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')Copy the code

2.2、 For each Podfile target that needs to embed Flutter, call install_all_flutter_pods(flutter_application_path).

target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end
Copy the code

2.3, the Runpod install.

3, addFlutter screentoiOS app

3.1. Create oneFlutterEngine

In AppDelegate.h:

@import UIKit;
@import Flutter;

@interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below.
@property (nonatomic.strong) FlutterEngine *flutterEngine;
@end
Copy the code

In AppDelegate.m:

// Used to connect plugins (only if you have plugins with iOS platform code).
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

#import "AppDelegate.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey.id> *)launchOptions {
  self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
  // Runs the default Dart entrypoint with a default Flutter route.
  [self.flutterEngine run];
  // Used to connect plugins (only if you have plugins with iOS platform code).
  [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end
Copy the code

3.2, use,FlutterEngineTo show you oneFlutterViewController

@import Flutter;
#import "AppDelegate.h"
#import "ViewController.h"

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];

    // Make a button to call the showFlutter function when pressed.
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self
               action:@selector(showFlutter)
     forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Show Flutter!" forState:UIControlStateNormal];
    button.backgroundColor = UIColor.blueColor;
    button.frame = CGRectMake(80.0.210.0.160.0.40.0);
    [self.view addSubview:button];
}

- (void)showFlutter {
    FlutterEngine *flutterEngine =
        ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
    FlutterViewController *flutterViewController =
        [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [self presentViewController:flutterViewController animated:YES completion:nil];
}
@end
Copy the code

Iv. Follow-up development

To modify the dependencies of the my_flutter/pubspec.yaml plugin, run the Flutter pub get command in the Flutter module directory to refresh the plugin list with the podhelper.rb script. Some /path/MyApp/pod install

4. Common mistakes and solutions

1、 如果发现项目报target of uri doesn't exist

Run Flutter Upgrade directly in Terminal at the bottom of the Android Studio software

2. The SWIFT plugin used by the FLUTTER project based on OC causes an error.

T.zoukankan.com/qqcc1388-p-…

Github.com/mxcl/Promis…

3. Plugins referenced in FLUTTER may duplicate the classes defined by the original project

Solution: delete the third party class in the native project;

4, iOS14 system as soon as the App will flash back

Due to low-level changes in iOS’s debugger mechanisms, developers using versions of Flutter earlier than 1.20.4 stable won’t be able to launch apps (by using flutter run or a Flutter-enabled IDE) on physical iOS devices running iOS 14. This affects debug, profile, and release builds. Simulator builds, add-to-app modules, and running directly from Xcode are unaffected.

Upgrading to Flutter 1.22 beta allows you to build, test, and deploy to iOS without issue. Upgrading to 1.20.4 stable allows you to build and deploy to iOS 14, but not debug.

Translation:

Due to low-level changes to the iOS debugger mechanism, developers using versions prior to 1.20.4 Stable will not be able to launch apps on physical iOS devices running iOS 14 (either by using Flutter Run or flutter enabled IDE). This affects debugging, profile, and release builds. Emulator builds, modules added to the application, and running directly from Xcode are not affected.

Upgrading to Flutter 1.22 Beta will allow you to build, test and deploy to iOS without any problems. Upgrading to 1.20.4 Stable allows you to build and deploy to iOS 14, but not debug.

Solution: Change Scheme to Release

References:

1. Official Documentation of FLUTTER