参考资料：
在 macOS 上安装和配置 Flutter 开发环境
Flutter iOS 混合工程自动化
Flutter 与 iOS 混合项目初探
Flutter混合开发(二)：iOS项目集成Flutter模块详细指南
Flutter 开发 （1）iOS 下超详细集成 Flutter
Flutter中文网 在macOS上搭建Flutter开发环境

1.下载flutter SDK

https://flutter.cn/docs/development/tools/sdk/releases

2.安装和配置 Flutter 开发环境

在 macOS 上安装和配置 Flutter 开发环境

配置 flutter 的 PATH 环境变量(当前窗口生效)：
这个命令配置了 PATH 环境变量，且只会在你 当前 命令行窗口中生效。如果想让它永久生效，请查看 更新 PATH 环境变量。

 export PATH="$PATH:`pwd`/flutter/bin"

运行 flutter doctor 命令
通过运行以下命令来查看当前环境是否需要安装其他的依赖（如果想查看更详细的输出，增加一个 -v 参数即可）：

这个命令会检查你当前的配置环境，并在命令行窗口中生成一份报告。安装 Flutter 会附带安装 Dart SDK，所以不需要再对 Dart 进行单独安装。你需要仔细阅读上述命令生成的报告，看看别漏了一些需要安装的依赖，或者需要之后执行的命令（这个会以 加粗的文本 显示出来）。

 flutter doctor

安装配置遇到的问题：

image.png

处理办法：

到idea - plugin 中下载安装dart和Flutter，重启idea ，然后终端重新执行 flutter doctor

20201230164019.jpg 20201230164045.jpg 正常的运行结果

3. 混合开发接入

结构图示 (本人项目使用了CocoaPods )

image.png

1) 在项目文件夹同级目录创建Flutter模块（Flutter相关页面的代码都在这里）。

打开终端 cd 到Flutter测试文件夹
flutter create --template module my_flutter

2) Podfile 添加下面代码（ my_flutter是模块文件夹名称），然后cd 到 项目文件夹 执行 pod install

##Flutter工程路径
#flutter_application_path = '../my_flutter'
##读取 podhelper.rb 的Ruby代码在当前目录执行
#eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

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

image.png

3) 编译一下如果没有问题，添加代码

在控制器导入  #import <Flutter/Flutter.h> 

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self action:@selector(handleButtonAction) forControlEvents:UIControlEventTouchUpInside];

    [button setTitle:@"加载Flutter" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor blueColor]];
    button.frame = CGRectMake(100, 100, 160, 60);
    [self.view addSubview:button];
    
    
}


- (void)handleButtonAction{
    
    FlutterViewController *flutterViewController =[FlutterViewController new];
    flutterViewController.title = @"flutterTitle";
//    //设置路由参数
//    [flutterViewController setInitialRoute:@"route"];
//    [self presentViewController:flutterViewController animated:false completion:nil];
    [self.navigationController pushViewController:flutterViewController animated:YES];

}

4) 运行结果：

第一个界面 点击按钮跳转之后的flutter界面

5) 修改模块的默认代码，位置： my_flutter - lib- main.dart ，替换为下面代码

image.png

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

6) 运行项目， 点击按钮

image.png

idea 配置Flutter ，创建新项目，并运行

image.png image.png image.png image.png