Flutter学习之: iOS项目中集成Flutter

本示例在已安装flutter、CocoaPods环境下:

安装Flutter:https://flutterchina.club/setup-macos/
安装CocoaPods: https://cocoapods.org

  1. 创建一个文件夹SwiftFlutterDemo(示例),文件目录结构:

    filePath.png

  2. 切换flutter分支到master,先查看当前分支:

flutter channe  //查看当前分支

如果当前分支是master则忽略以下操作:

flutter channel master //切换分支
  1. 在SwiftFlutterDemo目录下:
flutter create -t module myflutter

创建一个flutter项目(flutter项目命名规则:[a-z0-9_])

  1. SwiftFlutterDemo目录下新建一个iOS项目iosFlutterBitCode设置成NO,因为Flutter混合开发不支持Bitcode

    Bitcode.png

  2. 安装Cocoapods,在iosFlutter目录下执行:

pod init

创建Podfile文件

platform :ios, '9.0'
target 'iosFlutter' do
 # Comment the next line if you don't want to use dynamic frameworks
 use_frameworks!
 # Pods for iosFlutter

flutter_application_path = '../myflutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
install_all_flutter_pods(flutter_application_path)

end

之后执行

pod install
  1. command+B,build一下,如果没有报错,那么部署成功

  2. 代码实现
    在AppDelegate.swift中实现以下代码:

import FlutterPluginRegistrant //引入插件

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    
    lazy var liftCycleDelegate: FlutterPluginAppLifeCycleDelegate = {
        let delegate = FlutterPluginAppLifeCycleDelegate.init()
        return delegate
    }()

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        GeneratedPluginRegistrant.register(with: self as? FlutterPluginRegistry)
        return liftCycleDelegate.application(application, didFinishLaunchingWithOptions: launchOptions ?? [:])
    }
}

在ViewController中创建一个按钮,本例是用StoryBoard创建

import Flutter //引入头文件

 @IBAction func onClick(_ sender: Any) {
        let flutterVC: FlutterViewController = FlutterViewController.init()
        //默认打开方式
        flutterVC.setInitialRoute("routel")
        self.navigationController?.pushViewController(flutterVC, animated: true)
}
  1. Hot Reload:用Simulator 需要提前打开,然后在myflutter目录下执行:
flutter attach

之后终端会输出以下信息:

HehuimindeMacBook-Pro:myflutter Hehuimin$ flutter attach
Checking for advertised Dart observatories...
Waiting for a connection from Flutter on iPhone Xs Max...

如果一直卡在这里,只需在xCode中运行即可(设备要一致),然后修改flutter代码,ctr+s保存,在终端输入r即可

问题

  1. Flutter更新到1.9.x版本iOS运行报错问题,Permission denied
    切到mater分支
    参考文章:https://blog.csdn.net/u010809694/article/details/100779247

2.pod install如果出现以下问题


1573023955899.jpg

解决方法:
找到myflutter -> .ios -> Flutter -> Generated.xcconfig文件,修改对应的 路径


1573024758607.jpg

3.如果是iosFlutter项目下pod install出现以下错误:

1573026060722.jpg

解决方法:
在myflutter目录下执行:flutter pub get
然后再执行:flutter run ,如果报了以下错误
1573026215381.jpg

需要在myflutter->.ios 里面Podfile文件加use_frameworks!

参与文章: http://www.cocoachina.com/cms/wap.php?action=article&id=25696

Demo地址:SwiftFlutterDemo

推荐阅读更多精彩内容