Flutter第三篇具体搭建Flutter工程环境一. 工作环境要求接下来讨论的工作环境是MAC环境，需要必备的安装软

一. 工作环境要求

接下来讨论的工作环境是MAC环境，需要必备的安装软件有：

JDK
Android tudio和SDK
Flutter Sdk；
XCode

JDK的安装：

1）下载安装

mac系统一般默认会安装jdk 1.6,路径为/System/Library/Java/JavaVirtualMachines/1.6.0.jdk,但有时候可能需要下载更高版本的jdk

官网下载地址：www.oracle.com/technetwork…

为什么选择jdk8而不是15 扩展材料： www.techug.com/post/it-is-…

2）配置

配置方式为 vim ~/.bash_profile,增加或修改

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_79.jdk/Contents/Home

export JAVA_HOME

export PATH= $PATH:$ JAVA_HOME

最后重新加载profile

source ~/.bash_profile

3）验证

可以查看到当前版本信息代表安装配置成功。

注意：如果用bash，修改~/.bash_profile 或 ~/.profile；

如果用zsh，修改～/.zshrc

修改这些文件之后，重修打开terminal，配置不会丢

Android studio安装和SDK配置：

1）下载安装官网下载：developer.android.com/tools/studi…得到的dmg文件直接拖到Applications安装，注意安装路径

2）配置sdk及jdk路径安装Android Studio之后会默认安装Android SDK,打开Android Studio，配置路径打开File->Project Structure填写对应的路径，如下图

同时，为使不仅在Android Studio中可用，在.bash_profile中添加： SDK_HOME=/Users/baidu/Library/Android/sdk

export SDK_HOME

export PATH= $PATH:$ SDK_HOME

3)配置ADB

ADB的全称为Android Debug Bridge，说白了就是debug工具在.bash_profile中添加： ADB_HOME=/Users/baidu/Library/Android/sdk/platform-tools/ export ADB_HOME export PATH= $PATH:$ ADB_HOME

4）配置gradle （这不是必须的）

在.bash_profile中添加：

GRADLE_HOME=/Users/baidu/Develop/gradle-2.10

export GRADLE_HOME

export PATH= $PATH:$ GRADLE_HOME/bin

经过以上环节，就可以基于Android Studio进行Android开发了。

Flutter SDK的安装：

进入Flutter 官网，选择Stable channel(macOS)最新版进行下载，截止本文定稿，最新稳定版为2.5。

若遇到网络问题，可进行镜像配置，以下配置可跳过。

对于使用homebrew下载，因为镜像源的原因可能会导致很多东西下载的很慢，通过如下方式可以替换下载源：
MacOs替换系统镜像源：
# 替换brew.git:
cd "$(brew --repo)"
git remote set-url origin 
https://mirrors.aliyun.com/homebrew/brew.git
# 替换homebrew-core.git:
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin 
https://mirrors.aliyun.com/homebrew/homebrew-core.git
# 应用生效
brew update
# 替换homebrew-bottles:
echo 'export HOMEBREW_BOTTLE_DOMAIN=
https://mirrors.aliyun.com/homebrew/homebrew-bottles
' >> ~/.bash_profile

下载下来的SDK是一个zip包，接下来，我们把下载的压缩包解压到你想安装的目录，安装目录可随个人喜好。个人比较习惯于，将自己的文件进行分类放到~/下，点击屏幕右上角的前往，选择前往文件夹

创建codeTools文件夹：

下载的SDKzip文件直接拖到codeTools中

双击进行解压

解压完成后，为了可以在命令行中执行 flutter 命令，我们同样需要配置环境变量。
对于 macOS系统，我们编辑~/.bash_profile 文件，把以下代码添加至文件最后，将 flutter 命令的执行路径追加到环境变量 PATH 中：
vim .bash_profiles打开.bash_profile文件，写入以下内容（若不太熟悉命令行工具，则可按上边的步骤打开codeTools文件夹自行创建编辑）:

export PATH=~/codeTools/flutter/bin:$PATH

据官方说，从 macOS Catalina 版开始，您的 Mac 将使用 zsh 作为默认登录 Shell 和交互式 Shell。您还可以在较低版本的 macOS 中将 zsh 设置为默认 Shell。对于zsh作为默认环境变量的，通过修改～/.zshrc

修改这些文件之后，重修打开terminal，配置不会丢，如下第一个文件：

环境变量大概配置成如下这样：

XCode的安装：

直接在AppStore中下载Xcode，就可以了。不过要注意，最新版本的Xcode对于mac的系统版本有要求。建议升级之前先备份数据。

Xcode完成安装后，需要通过flutter doctor命令得到两行提示。然后iterm命令行中依次输入对应的提示就可以实现AS检测到Xcode创建的

Simulator了。

安装完成之后我们便可以使用IOS模拟器了，但若要将Flutter应用部署到真实的IOS设备上，则需要进行IOS工具链设置，需要安装一些额外的连接控制命令工具（就像通过电脑的 iTunes 给手机安装应用一样），并申请一个 iOS 开发者账号进行 Xcode 签名配置。
这里不做具体说明，请自行搜索。

二. 依赖项检测

如果上面的工具都安装了，环境变量也都配置了，运行以下命令查看是否需要安装其它依赖项来完成安装：

Plain Text

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.1 20G80 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2020.3.2)
[✓] VS Code (version 1.61.2)
[✓] Connected device (1 available)


• No issues found!

依照检测结果进行修复环境，缺什么安装什么,对于VS Code和IntelliJ IDEA，个人觉得没有必要安装，如果没有强迫症，可以不用在乎flutter doctor给出的提示。

三. Android Studio配置Flutter环境跑一个项目

打开Android Studio

选择Open an Existing Project

打开hello_world文件夹

打开设置

选择Plugins，搜索Flutter下载插件，同样也下载Dart插件

AS运行First Flutter项目

完成安装后，退出到主界面，可以看到头部选择device，以及运行项目的按钮

我们选择Open IOS Simulator，此时打开了苹果设备的模拟器

再点击运行按钮

项目启动中，等待大概10秒左右，第一次可能会稍慢一点

项目便能运行起来了

此时项目已经运行起来了，当然，对于真机的苹果手机，你也可以把你的手机连接到电脑（苹果手机需要xcode并需要签名），在顶部工具栏选择你的手机设备运行项目。但是对于android开发来说，前面没有走这么远的必要，感兴趣的可以自己试试。

XCode配置Flutter环境跑一个项目

a.先用xcode配置，跑一个Hello World Flutter项目到手机：

1.先创建一个flutter项目，创建的方式可以通过vscode,AS，termianl。官方的操作链接如下：

flutterchina.club/get-started…

2.双击对应的flutter工程的xcodeproj或者xcworkspace都可以打开这个工程

3.一次点击工程页面的1，2，3，输入Apple ID,成为一个开发者。这儿需要主义，Bundle Identifier类似Android项目的包名。一个个人的Apple ID只可以绑定一个Bundle Identifier。所以，对于多个flutter工程，跑的时候需要都替换这儿的Bundle Identifier为最初绑定了Apple ID的Bundle Identifier。

4.连接手机，弹框接受设备信任，点击运行按钮，虚着呢对应的设备，直接安装对应的应用到手机上。打开应用会提示开发者不受信任。进入手机的设置-》通用-》VPN与设备管理-》信任开发者。

然后就可以安装对应的app到手机上了。安装到Simulator会更加简单，直接点击运行按钮就可以了。

b.再用xcode配置，跑一个集成了Flutter项目的原生IOS项目到手机：

1.创建一个 Flutter module。在命令行中执行： Plain Text

cd Desktop/flutter/
flutter create --template module my_flutter

Flutter module 会创建在~/Desktop/flutter/目录。在这个目录中，你可以像在其它 Flutter 项目中一样，执行flutter命令。比如flutter run --debug或者flutter build ios。my_flutter项目的目录结构和普通 Flutter 应用类似：

my_flutter/
├── .ios/
│   ├── Runner.xcworkspace
│   └── Flutter/podhelper.rb
├── lib/
│   └── main.dart
├── test/
└── pubspec.yaml

2.使用 CocoaPods 依赖管理和已安装的 Flutter SDK

这个方法需要你的项目的所有开发者，都在本地安装 Flutter SDK。只需要在 Xcode 中编译应用，就可以自动运行脚本来集成 dart 代码和 plugin。这个方法允许你使用 Flutter module 中的最新代码快速迭代开发，而无需在 Xcode 以外执行额外的命令。

下面的示例假设你的既有应用和 Flutter module 在相邻目录。如果你有不同的目录结构，需要适配到对应的路径。

~/Desktop/flutter/
├── my_flutter/
│   └── .ios/
│       └── Flutter/
│         └── podhelper.rb
└── MyApp/
    └── Podfile

如果你的应用（MyApp）还没有 Podfile，根据CocoaPods getting started guide来在项目中添加Podfile。

创建Podfile文件

zhangqi59@zhangqi IosFlutter % cd /Users/.../Desktop/flutter/IosFlutter
zhangqi59@zhangqi IosFlutter % pod init

在Podfile中添加下面代码： Plain Text

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

每个需要集成 Flutter 的Podfile target，执行install_all_flutter_pods(flutter_application_path)

target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end

4. 运行 pod install。生成了一些新的文件夹

然后双击IosFlutter.xcodeproj或者IosFlutter.xcwordspace文件，打开对应的原生工程。文件目录如下：

接下来在标记的几个文件中添加对应的代码，语音用object-c： InAppDelegate.h:

@import UIKit;
@import Flutter;

@interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below.
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end

在AppDelegate.m: Plain Text

// Used to connect plugins (only if you have plugins with iOS platform code).
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

#import "AppDelegate.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions {
  self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
  // Runs the default Dart entrypoint with a default Flutter route.
  [self.flutterEngine run];
  // Used to connect plugins (only if you have plugins with iOS platform code).
  [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

在ViewController .m :

Plain Text

@import Flutter;
#import "AppDelegate.h"
#import "ViewController.h"


@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];

    // Make a button to call the showFlutter function when pressed.
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self
               action:@selector(showFlutter)
     forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Show Flutter!" forState:UIControlStateNormal];
    button.backgroundColor = UIColor.blueColor;
    button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
    [self.view addSubview:button];
}

- (void)showFlutter {
    FlutterEngine *flutterEngine =
        ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;
    FlutterViewController *flutterViewController =
        [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [self presentViewController:flutterViewController animated:YES completion:nil];
}
@end

Run一下，现在，你的 iOS 应用中集成了一个 Flutter 页面。效果如下：

参考的文章

搭建Flutter工程环境

flutter.cn/docs/develo…

flutter.cn/docs/develo…