Flutter.1.基础搭建

一. flutter环境搭建

环境搭建跟着搭建flutter走.

问题

1. 在执行flutter docter 的时候可能会报无法执行加载libimobiledevice

   执行下面的语句

   brew update
   brew uninstall --ignore-dependencies libimobiledevice
   brew uninstall --ignore-dependencies usbmuxd
   brew install --HEAD usbmuxd
   brew install --HEAD libimobiledevice
   

   如果还是报关于iOS toolchain - develop for iOS devices (Xcode 10.1)的错误

   重启电脑是个不错的注意

2. android 集成第三方的flutter就好.

二. flutter搭建新项目

这里使用的是AS .在AS里面基层第三方flutter插件.直接创建新项目.勾选支持 ios 和 android 就可以

三. flutter集成到现有OC项目

1. 首先在项目中创建flutter项目

```终端执行
bogon:~ mrliuys$ cd             /Users/mrliuys/Documents/nongjq/SVN/iOS/branch/310flutter/Nongfadai 
bogon:Nongfadai mrliuys$ flutter create -t module lc_flutter
```

将会在目录下创建文件lc_flutter ,里面包含了lib.还有一些`.ios`  `.android`的隐藏文件夹.后面需要用到

2. 在Podfile中新增

   flutter_application_path = './lc_flutter'
   eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
   

   终端执行 pod install

   如果lc_flutter 跟 Podfile目录同级,flutter_application_path 这里定位的相对路径就用./
   上面两句脚本要放在Podfile最后面 end 的后面

3. 添加Run Script phase

   "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
   "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
   

   将 Script phase 移到 Target Dependencies phase后面。
   具体实现的脚本没有研究,实验了一下没有加入也不会报错.

4. 设置 bitcode=NO 这里当我设置成YES好像也没有异常.

5. 修改AppDelegate

   1. 将AppDelegate继承于FlutterAppDelegate

      #import 
      #import 
      
      @interface AppDelegate : FlutterAppDelegate
      @end
      

   2. 修改AppDelegate.m

      #import  // Only if you have Flutter Plugins
      
      #include "AppDelegate.h"
      
      @implementation AppDelegate
      
      // This override can be omitted if you do not have any Flutter Plugins.
      - (BOOL)application:(UIApplication *)application
      didFinishLaunchingWithOptions:(NSDictionary *)launchOptions         {
            [GeneratedPluginRegistrant registerWithRegistry:self];
            return [super application:application didFinishLaunchingWithOptions:launchOptions];
      }
      
      @end
      

6. 打开flutter页面

   - (void)__handleOpenFlutter {
       FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
   
       flutterViewController.view.backgroundColor = [UIColor whiteColor];
       [flutterViewController setInitialRoute:@"route1"];
   
       [self presentViewController:flutterViewController animated:YES completion:nil];
   }
   
   - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
   
       [self __handleOpenFlutter];
   }
   

   到这里的时候,当我们点击界面的时候,跳转的flutter界面可能是个空白的页面.这里需要用到第1步提到的 .ios 隐藏文件.如果没有出现空白页面,就跳过下面的

   

   图1

   将这个文件拉到项目里面,

   图2

   再次编译就可以了.

问题

1. 在OC里面.有时候.我们在热更新成功之后.重新编译xcode项目 main.dart所改的没有更新. 这时候需要执行xcode的 product -> clean. 清理一下项目的缓存数据.

四. 热更新

1. 新项目

AS下创建的新项目,打开模拟器,修改main.dart运行保存,就会自动执行热更到模拟器

2. 现有项目集成的flutter

1. 启动模拟器

2. 终端进入到lc_flutter路径下

3. 终端执行

   flutter attach
   

3. 终端提示

   bogon:lc_flutter mrliuys$ flutter attach
   Waiting for a connection from Flutter on iPhone XR...
   

4. 模拟器打开flutter页面

5. 终端自动连接到模拟器上

   bogon:lc_flutter mrliuys$ flutter attach
   Waiting for a connection from Flutter on iPhone XR...
   Done.
   Syncing files to device iPhone XR...                            2.5s
   

6. 编辑main.dart保存

7. 终端输入R,自动热更新到模拟器上

如果先打开模拟器打开的flutter 执行flutter attach 会一直在等待中

五. flutter动态化

目前没有较好的动态化的方案