创建iOS项目
先创建一个空的iOS项目来模拟已有的项目，取名FlutterAdd。
创建Flutter模块
进入到项目的同一层目录，如图：
cd .../FlutterAdd
flutter create -t module my_flutter
命令执行完成后会创建一个flutter的项目模块，如图：
创建Podfile文件
如果没有安装Cocoapods，需要先自行安装。
如果已正常安装，进入到工程目录：
cd .../FlutterAdd/FlutterAdd
初始化pod的环境：
pod init
此时工程中会出现一个Podfile文件，添加项目依赖的第三方库就在这个文件中配置。
在Podfile文件中最后的位置加上如下两句话：
flutter_application_path = '../my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
如下：
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'FlutterAdd' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
# Pods for FlutterAdd
target 'FlutterAddTests' do
inherit! :search_paths
# Pods for testing
end
target 'FlutterAddUITests' do
inherit! :search_paths
# Pods for testing
end
end
#新添加的代码
flutter_application_path = '../my_flutter'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
运行
pod install
将工程关闭，然后点击FlutterAdd.xcworkspace重新打开项目。
在Xcode工程中添加Dart代码的build phase
如下图,在Xcode工程中，选择TARGET -> Build Phases -> +号 -> New Run Script Phase，然后将如下命令粘贴到文本框中，最后通过快捷键⌘B编译：
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
编译完成后，在工程目录中会出现一个Flutter文件夹，如图：
将Flutter文件下的flutter_assets导入到工程中，导入时要选择Create folder references，导入完成后的工程目录：
在主app中使用FlutterViewController
修改AppDelegate.h继承自FlutterAppDelegate：
#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>
@interface AppDelegate : FlutterAppDelegate
@end
修改AppDelegate.m文件：
#import "AppDelegate.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins
@interface AppDelegate () @end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GeneratedPluginRegistrant registerWithRegistry:self];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
在ViewController.m中添加测试代码：
#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor lightGrayColor];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:@selector(handleButtonAction)
forControlEvents:UIControlEventTouchUpInside];
[button setTitle:@"Press me" forState:UIControlStateNormal];
[button setBackgroundColor:[UIColor blueColor]];
button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
[self.view addSubview:button];
}
- (void)handleButtonAction {
FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
[self presentViewController:flutterViewController animated:YES completion:nil];
}
@end
运行项目，点击按钮，将会显示如下页面：
热启动/热加载 与 Dart代码调试
进入my_flutter模块，执行如下命令：
cd .../my_flutter
flutter attach
命令完成，会有如下信息显示
Waiting for a connection from Flutter on iPhone XR...
接下来在xcode中启动app，并进入到flutter的页面，此时在控制台（终端）看到如下信息：
🔥 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:53132/
For a more detailed help message, press "h". To detach, press "d"; to quit,
press "q".
除了这种方式，也可在Android Studio 中进行 热启动/热加载 操作。
通过Android Studio打开main.dart，如图：
在Android Studio中也有控制台，可进行 热启动/热加载 操作，如图：
接下来我们把热重载打开，在main.dart中随便改一点东西，我们把'You have pushed the button this many times:'中的have删除掉，然后在控制台中输入r，可以看到输出如下内容：
Initializing hot reload...
Reloaded 1 of 419 libraries in 1,400ms.
再看页面，内容已经发生了改变：
到这里就结束了，祝大家工作愉快。
相关链接：
(https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps#ios)
https://tryenough.com/flutter03
https://www.jianshu.com/p/af085d4420fd
网友评论