iOS原生项目引入Flutter

在你安装好Flutter的前提下(在macOS上搭建Flutter开发环境ttps://flutterchina.club/setup-macos/)，为原项目添加flutter 模块,
比如我的项目是在，/Users/haoran1/Desktop/项目/VideoListApp
在终端执行，

$ cd /Users/haoran1/Desktop/项目/VideoListApp
$ flutter create -t module my_flutter

这将创建一个名称为my_flutter 模块文件。

创建完成之后在项目同级目录下会多出一个文件，其中包含一些Dart代码以启动，以及一个.ios / hidden子文件夹，它包含了包含一些Cocoapods和一个帮助程序Ruby脚本的模块项目。

会是这样子: 9FCB7A87-3DDD-4A05-9231-50D184A35A61.png

然后在Podfile文件里面添加如下两行代码:
flutter_application_path:flutter模块的路径

  flutter_application_path = '/Users/haoran1/Desktop/项目/VideoListApp/my_flutter'
  eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

执行 pod install ，

然后添加New Run Script Phase，

24AE4D1C-6C7B-4F1C-B805-8E1DD32401C7.png

然后去AppDelegate.h 里面，#import <Flutter/Flutter.h>，让AppDelegate继承于FlutterAppDelegate，在m文件里面，修改didFinishLaunchingWithOptions，添加 [GeneratedPluginRegistrant registerWithRegistry:self];

F5253488-DC5A-47A1-BB83-B4DD5A58C623.png

现在已经可以 跳转Flutter 界面啦,

1ECA27A5-E2E4-478E-B9E4-11C7951FB648.png

flutter支持热重载，修改代码后能立马看到效果。
终端执行

$ cd /Users/haoran1/Desktop/项目/VideoListApp/my_flutter
$ flutter attach

F6EB98DF-E576-4312-8DD6-3A5352234129.png

看到正在等待模拟器启动，监听flutter，然后使用Xcode 启动原生项目，跳转flutter界面，

原生界面:

image.png

点击按钮跳转flutter页面:

image.png

可以看到 已经跳转成功了，终端监听到flutter页面，

image.png

flutter带有热重载功能，修改代码，不重新运行可以直接看到修改后的界面，可以按r来刷新界面，在main.dart内添加一行文字:(main.dart文件在my_flutter/lib里面，使用VSCode或者Android studio打开)

image.png 在终端输入r后，界面已经变了： image.png

在跳转flutter页面时，可以通过设置 InitialRoute来展示不通的widget。

image.png

在main.dart内，通过routename进行判断，

image.png

一个月前接触到flutter，然后使用flutter一边学习一边重写了之前的公司小项目，感觉开发是真的好快，感觉比之前开发时间提快50%,并且是iOS/Android双平台的，页面流畅度也堪比原生（release），毕竟是google爸爸出的，闲鱼有多个页面已经使用flutter。个人感觉比RN入门快，RN基于js桥接，Flutter是自绘UI，真正的一套代码运行双端，另外flutter还可以开发web页面，好像还可以开发MacOS桌面应用。。。。。🐂🍺,另外google新的操作系统Fuchsia也可以使用flutter开发。

这是小项目的下载地址，可以下载体验一下（安卓版）：pgyer.com/mBHn