Flutter—环境搭建(Mac)

2020-04-14 本文已影响0人 Hu一刀

系统配置要求

操作系统：macOS（64 位）
磁盘空间：2.8 GB（不包含 IDE 或其余工具所需要的磁盘空间）
命令工具：Flutter 需要你的开发环境中已经配置了以下命令行工具。
bash, mkdir, rm, git, curl, unzip, which

一、下载FlutterSDK

1、可以到 Flutter官方网站下载，直接点击即可下载。
2、下载完成之后，解压，将解压好的 flutter 文件放到你想放的位置

二、各个平台配置

Android Studio的安装和配置

1、下载Mac版的Android Studio；
（当时笔者下载Android studio时，下载的是最新的正式版本，3.5.3正式版，但是到了配置Android studio SDK时，却没法安装，后来就下载了3.6RC3版本（现在好像没有这个版本了），下载3.6RC3版本后，android SDK顺利安装成功，如果你也遇到了这个问题，可以尝试换个版本下载试试）
2、下载Android studio SDK
点击打开Android studio软件，点击Configure — SDK Manager

2_1.png

2_2.png

2_3.png

选项选好之后，点击OK，根据提示一步一步操作

3、点击Configure — Plugins或者在上一步打开的SDK Manager页面中左侧，点击Plugins，然后分贝搜索Dart、flutter，下载

2_4.png

Xcode下载和配置

1、在Mac电脑中打开App Store软件，搜索xcode，点击下载
2、安装完成之后，要运行一次Xcode，或者通过输入命令 sudo xcodebuild -license来确保已经同意 Xcode 的许可协议。

VSCode下载配置

1、下载VSCode（这个自行搜索下载）
2、打开VSCode，搜索flutter，下载

2_5.png

三、PATH 环境变量配置

1、打开终端，输入open .bash_profile命令，回车键
2、在打开的配置文件中添加
export PATH=/Users/yanghao/flutter/bin:$PATH (/Users/yanghao/flutter是 flutter SDK的路径)
export ANDROID_HOME="/Users/yanghao/Library/Android/sdk" (Android studio SDK路径)
export PUB_HOSTED_URL=https://pub.flutter-io.cn（配置镜像路径）
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn（配置镜像路径）

最后command+s保存，终端执行source .bash_profile

最终配置截图

3_1.png

3、检查配置是否正确

这一步需要安装homebrew
执行如下命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果出现错误，可以执行brew doctor，根据提示解决错误

执行flutter doctor
出错的情况:
3_3.png
这个错误：Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
执行：flutter doctor --android-licenses 然后一直输入y，回车即可
如果出现libimobiledevice and ideviceinstaller are not installed. To install with Brew,run:
则是需要安装homebrew，根据上述步骤安装

如果都正确，则如下图所示: 3_2.png

四、创建项目

1、创建flutter项目

4_1.png
2、选择模拟器
iphone模拟器打开方式如下图所示
也可以通过命令行open -a simulator打开

4_2.png
安卓模拟器需要下载：按照以下步骤下载即可

4_3.png

4_4.png
运行结果：

4_5.png

3、如果要在iPhone真机上面运行，则还需要配置证书
使用Xcode打开项目，配置证书

4_6.png

4_7.png
证书选择完成之后，编译：command + B，编译通过之后，就可以到Android studio中连接真机运行了。
笔者在证书配置完成，编译也通过之后，真机运行，闪了一下就没了。然后到Xcode中连接真机调试，发现报下图错误：

4_8.png
这个错误笔者尝试好多方法也没有解决，从StackOverflow看到说是已经向flutter官方反馈。偶然间看到说和手机系统版本有关，于是就把手机系统从13.3.1升级到了13.4，然后再次运行，竟然。。。运行成功了。

至此，flutter环境搭建完成，接下来就可以进行flutter学习了。