Flutter开发之——iOS原生项目导入Flutter

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • iOS开发环境介绍
  • 创建iOS原生项目
  • 创建Flutter module
  • 将Flutter嵌入到iOS应用程序中
  • 打开混合后的项目空间(MyApp.xcworkspace)
  • 原生页面跳转Flutter

二 iOS开发环境介绍

  • Xcode：12.5.1
  • CocoaPod：1.10.1(pod --version)
  • Flutter：2.2.3
  • Dart：2.13.4

三 创建iOS原生项目

3.1 说明

创建IOS2Flutter文件夹，稍后将iOS和flutter项目都放在此文件夹下

3.2 创建IOS项目

  • 依次点击：File——>Project——>App
  • 设置对应的项目名称，机构id和编程语言
  • 选择文件的创建位置

四 创建Flutter module

  • 进入到IOS2Flutter文件夹(iOS项目文件夹)，并在终端中打开

  • 执行如下指令创建Flutter module

    1
    flutter create --template module my_flutter

  • 执行后原生iOS和Flutter项目的目录结构


    说明：

    1
    2
    1-.ios 是隐藏目录，可以单独运行Flutter module，测试此模块的功能
    2-iOS代码添加到现有应用程序的项目或插件中，而不是添加到模块的.ios /目录中

五 将Flutter嵌入到iOS应用程序中

5.1 嵌入方式说明

将Flutter嵌入到IOS应用程序中，使用：使用CocoaPods和已安装的Flutter SDK

5.2 创建IOS端Podfile文件

  • 终端进入到iOS项目路径下

    1
    cd MyApp/

  • 执行如下指令，生成Podfile文件

    1
    pod init

  • 默认创建的Podfile文件内容如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # Uncomment the next line to define a global platform for your project
    # platform :ios, '9.0'

    target 'MyApp' do
      # Comment the next line if you don't want to use dynamic frameworks
      use_frameworks!

      # Pods for MyApp

      target 'MyAppTests' do
        inherit! :search_paths
        # Pods for testing
      end

      target 'MyAppUITests' do
        # Pods for testing
      end

    end

  • 修改Podfile文件的内容(导入flutter模块)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    # Uncomment the next line to define a global platform for your project
    platform :ios, '9.0'
    flutter_application_path = '../my_flutter'
    load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

    target 'MyApp' do
      # Comment the next line if you don't want to use dynamic frameworks
      use_frameworks!
      install_all_flutter_pods(flutter_application_path)

      # Pods for MyApp

      target 'MyAppTests' do
        inherit! :search_paths
        install_all_flutter_pods(flutter_application_path)
        # Pods for testing
      end

      target 'MyAppUITests' do
        install_all_flutter_pods(flutter_application_path)
        # Pods for testing
      end

    end

    说明：CocoaPods 相关请参考官网

    1
    2
    1-platform：ios版本9.0
    2-flutter_application_path = '../my_flutter'：flutter模块的路径

  • 执行pod install命令

六 打开混合后的项目空间(MyApp.xcworkspace)

  • 关闭Xcode，找到Ios2Flutter/MyApp/MyApp.xcworkspace，用xcod打开

  • 打开后的项目包含iOS原生项目(MyApp)和Flutter依赖Pods

  • ⌘B 或者Product—>Build 编译项目，编译成功后Flutter已成功导入，可以在iOS中正常使用

七 原生页面跳转Flutter

7.1 IOS跳转Flutter界面

在Main.storyboard上添加一个按钮IOS跳转Flutter

7.2 ViewController中跳转Flutter方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import UIKit
import Flutter

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    @IBAction func jumpFlutter(_ sender: Any)
    {
         let flutterViewController = FlutterViewController.init()
         present(flutterViewController, animated: true, completion: nil)
    }  
}

7.3 效果图