一、Windows环境搭建

1.1 系统要求

安装并运行Flutter，开发环境须满足以下要求:

  • 操作系统：Windows 7 或更高版本 (64-bit)
  • 磁盘空间：400 MB (不包括Android Studio的磁盘空间)
  • 内存大小：8G以上

    1.2 获取Flutter SDK

    1.2.1 Flutter SDK下载

    选择对应电脑操作系统的稳定版本(Stable版本)
    下载地址： https://docs.flutter.dev/development/tools/sdk/releases?tab=windows
    DF57562540895CC1637CD09E186F6B68.png

    1.2.2 配置Flutter SDK路径

    1.3 更新环境变量

    1.3.1 镜像站点

    由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：
    1. export PUB_HOSTED_URL=https://pub.flutter-io.cn
    2. export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    注意：此镜像为临时镜像，并不能保证一直可用，请参考 https://docs.flutter.dev/community/china 获取镜像服务器的最新动态。

    1.3.2 配置环境变量

    如果没配置JAVA环境，需要安装jdk-8（安装程序会提前提供），安装完成后配置JAVA环境变量。
    点击此电脑 - 属性 - 系统 - 系统信息- 高级系统设置 - 高级 - 环境变量
    B7E587A1784EA029BFB7511FADA7F41C.png
    70654A1FF4CB3714C1EB6868C011F122.png
    点击新建按钮，配置变量名为JAVA_HOME，变量值为D:\Program Files\Java\jdk1.8.0_333，jdk8安装的目录不同，变量值也会不同。
    07F94FA83BAB02A61F6DAF08CD3129DB.png
    BC994A26B05BABBCA8B5262632C3588D.png
    在系统变量中找到Path，双击打开，显示如下，新建%JAVA_HOME%\bin和%JAVA_HOME%\jre\bin
    1ECBE8F10BA6B3ECAE3D3C2B43D42770.png
    配置Flutter SDK环境变量，点击此电脑 - 属性 - 系统 - 系统信息- 高级系统设置 - 高级 - 环境变量，
    在系统变量中找到Path，双击打开，显示如下，新建一个Flutter SDK存放的目录，如D:\Program Files\Android\flutter\bin。
    配置镜像环境变量
    在系统变量中新建变量名 PUB_HOSTED_URL，其值为https://pub.flutter-io.cn
    在系统变量中新建变量名 FLUTTER_STORAGE_BASE_URL， 其值为https://storage.flutter-io.cn
    E8F1F8B1799FBFE241A6B330975734CB.png
    5492E3AC8F3CBDA20106BD265A822EEF.png

1.4 安装Android Studio

1.4.1 下载Android Studio

为Flutter配置Android开发环境，需要在电脑上安装Android Studio，Android Studio是Google 官方提供的Android 应用集成开发工具。
下载链接：https://developer.android.google.cn/studio
D0F988849433033429B34B40312FA436.png
按照如下向导安装
4E2BB5861C057A4E71D9164981B64219.png
51B2C46B993B0D1B304ED1F63E1E917A.png
如果手动修改了安装路径，使用flutter doctor -v命令查看信息时，会报错“Unable to locate Android SDK”，需要在终端中执行flutter config —android-sdk “SDK路径”命令
4E0C06B9B8A5995D7875A288CA9ADF8A.png
91E621204BE986C6DABF2141EB97A14E.png
1A27B0C1F6867D483A4A11C98CFFF5C1.png
24F5725D30ADDAB32E7C98F01E9B77C7.png
启动Android Studio，进行如下设置
C7DDACDA0B31D51CAC48BA94C150B890.png
886A05EA6FF5A0AD1BF0093D85E3B259.png
5F90438ECEE7946818B80E685EE49B02.png
7181B79B2CF984D540081CCF10239279.png
7DCD65BF9E9B77C927046D593761188F.png
7A13718B6A18C3E1115BB83333858273.png
在欢迎界面中点击“More Action”，弹出如下选项，选中SDK Manager
CF642DA72AA8B74F4A0BD76FF63E004E.png
弹出如下界面，选择下面的目录，选中Android SDK的Android SDK Command-line Tools，点击Apply
F576C8857762995BCF94EFDB2A8692F4.png
7E819A4F61CEB192AC814115DCCF1858.png
启动Android Studio，选中Plugins，配置Flutter和Dart插件
ED86C4DCF985D5D76A630D2EA310D489.png

1.4.2 Android模拟器

启动Android Studio
7A13718B6A18C3E1115BB83333858273.png
在欢迎界面中点击“More Action”，弹出如下选项，选中Virtual Device Manager
27420E73CF04A97D7CB799E243BA3AA2.png
弹出如下界面，点击Create device
9569C1BC6DD297FE365B1BA567ECEECD.png
弹出如下界面，点击Phone，选择某一设备后，点击Next
A2E8CB19181CBFFDA83A0FF7C58B4568.png
选择一个版本的API，点击Download，弹出如下内容
0E0F9293449C82CA35E39C20100D610A.png
30F527CE26526962B87BB49DB66861C1.png
E9A657E752F92B4E2375B1958ACF4C0A.png
返回到先前Create device界面，会出现刚刚创建的device
022B311F2B6C9EB7FD9768C6A20797BF.png
当我们创建一个Flutter工程后，可以选择我们刚刚创建的模拟器设备
截屏2022-07-07 14.32.41.png
此时会打开安卓的模拟器
WX20220707-143526@2x.png

1.5 安装Visual Studio

1.6 安装Google Chrome

下载链接：https://www.google.cn/intl/zh-CN/chrome/
48B8F76628585E04EAA27DFEB632DE9D.png

1.7 验证安装环境

打开终端，执行flutter doctor -v，没有报错，表示Windows环境已配置完成

如果报“Unable to locate Android SDK”，如下，需要在终端中执行flutter config —android-sdk “SDK路径”命令，”SDK路径”替换为电脑中存放Flutter SDK路径
5E56F195D76A12D1D51A09624C7F2A52.png

如果报“Some Android licenses not accepted”，如下，需要在终端中执行flutter doctor —android-licenses命令，输入y（有多个需要输入y）即可。
9D81FBF4E6F9B7AD944634058CC6227A.png
ECFC700D786AAFFCE74380FD5A162B80.png

二、Mac环境搭建

2.1 系统要求

安装并运行Flutter，开发环境须满足以下要求:

  • 操作系统：macOS (64-bit)
  • 磁盘空间：700 MB (不包括Xcode或Android Studio的磁盘空间）

  • 内存大小：8G以上

    2.2 获取Flutter SDK

    2.2.1 Flutter SDK下载

    选择对应电脑操作系统的稳定版本(Stable版本)
    下载地址： https://docs.flutter.dev/development/tools/sdk/releases?tab=macos
    WX20220707-103553@2x.png

    2.2.2 配置Flutter SDK路径

    解压下载的Flutter SDK，建议拷贝到“应用程序”目录下，给配置环境变量时使用。
    WX20220707-104648@2x.png

    2.3 更新环境变量

    2.3.1 镜像站点

    由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

    1. export PUB_HOSTED_URL=https://pub.flutter-io.cn
    2. export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

    注意：此镜像为临时镜像，并不能保证一直可用，请参考 https://docs.flutter.dev/community/china 获取镜像服务器的最新动态。

    2.3.2 配置环境变量

    为在任何终端会话中运行flutter命令，需要将Flutter添加到PATH中。

  • 确认Flutter SDK所在目录

  • 打开终端，在根目录中执行ls -a，查看是否存在.bash_profile文件（如果使用终端是zsh，需要查看是否存在.zshrc文件）。

WX20220707-112546@2x.png

  • 如果不存在，在终端根目录中请执行touch .bash_profile或touch .zshrc命令创建，在执行open .bash_profile或者open .zshrc打开文件。

  • 在文件中配置环境变量，FLUTTER_INSTALL_PATH为Flutter SDK所在目录，如果是配置在“应用程序”目录下，可以配置为：export PATH=$PATH:/Applications/flutter/bin

    1. export PATH=$PATH:[FLUTTER_INSTALL_PATH]/flutter/bin

  • 在文件中配置镜像站点

    1. export PUB_HOSTED_URL=https://pub.flutter-io.cn
    2. export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

WX20220707-155604@2x.png

  • 在终端根目录中运行source .bash_profile 或 source .zshrc
  • 验证“flutter/bin”是否已在PATH中：在终端根目录中运行 echo $PATH

    2.4 安装Android Studio

    2.4.1 下载Android Studio

    为Flutter配置Android开发环境，需要在电脑上安装Android Studio，Android Studio是Google 官方提供的Android 应用集成开发工具，需要注意的是Mac电脑芯片不一样，选择的安装包也不一样。
    下载链接：https://developer.android.google.cn/studio
    WX20220707-135937@2x.png
    Android Studio下载后双击安装，按照安装向导提示安装即可。
    打开Android Studio，点击电脑工具条上的Android Studio，选择Preferences…
    截屏2022-07-07 14.52.55.png
    弹出如下界面，选择下面的目录，安装Android SDK的Android SDK Command-line Tools，安装完成后先点击Apply，再点击OK
    WX20220707-144525@2x.png
    安装Flutter和Dart插件，安装完成后先点击Apply，再点击OK
    WX20220707-144153@2x.png
    WX20220707-144248@2x.png

    2.4.2 Android模拟器

    打开Android Studio，会出现如下界面。
    WX20220707-141535@2x.png
    点击右上角三个点图标，选择Virtual Device Manager
    截屏2022-07-07 14.19.03.png
    弹出如下界面，点击Create device
    WX20220707-142020@2x.png
    弹出如下界面，点击Phone，选择某一设备后，点击Next
    WX20220707-142239@2x.png
    选择一个版本的API，点击Next
    WX20220707-142523@2x.png
    点击Finish完成
    WX20220707-142624@2x.png
    返回到先前Create device界面，会出现刚刚创建的device
    WX20220707-142917@2x.png
    当我们创建一个Flutter工程后，可以选择我们刚刚创建的模拟器设备
    截屏2022-07-07 14.32.41.png
    此时会打开安卓的模拟器
    WX20220707-143526@2x.png

    2.5 安装 Xcode

    2.5.1 下载Xcode

    为Flutter配置iOS开发环境，需要在Mac上安装Xcode（此部分Windows电脑忽略），Xcode是苹果公司的iOS和macOS的开发工具，在下载时不要下载beta版本。
    下载链接：https://developer.apple.com/download/all/?q=xcode
    WX20220707-115252@2x.png
    下载Xcode并双击安装即可。

    2.5.2 Xcode模拟器

    打开Xcode开发工具，出现如下界面
    WX20220707-120548@2x.png
    点击工具条左上角中Xcode -> Open Developer Tools -> Simulator，可以打开Xcode模拟器
    截屏2022-07-07 12.07.33.png
    WX20220707-121124@2x.png

    2.5.3 安装CocoaPods

    CocoaPods是OS X和iOS下的一个第三类库管理工具，通过CocoaPods工具我们可以为项目添加被称为“Pods”的依赖库（这些类库必须是CocoaPods本身所支持的），并且可以轻松管理其版本。

2.5.3.1 M1芯片
如果Mac电脑是M1芯片，需要设置终端工具“使用Rosetta打开”
截屏2022-07-07 15.16.50.png
WX20220707-151817@2x.png
打开终端，在根目录下执行ruby -v，查看版本
WX20220707-152755@2x.png
检查ruby源，执行命令gem sources -l
WX20220707-153820@2x.png
如果不是https://gems.ruby-china.com，需要移除后添加https://gems.ruby-china.com

打开终端，在根目录下依次执行：

  • sudo gem install cocoapods -n /usr/local/bin，输入电脑开机密码
  • sudo gem install ffi
  • pod setup

2.5.3.2 inter芯片
打开终端，在根目录下执行ruby -v，查看版本。如果ruby版本低，可以在终端根目录下执行 sudo gem update —system命令进行升级。
WX20220707-152755@2x.png
检查ruby源，执行命令gem sources -l
WX20220707-153820@2x.png
如果不是https://gems.ruby-china.com，需要移除后添加https://gems.ruby-china.com

打开终端，在根目录下依次执行：

  • sudo gem install -n /usr/local/bin cocoapods，输入电脑开机密码
  • pod setup

    2.6 安装Google Chrome

    下载链接：https://www.google.cn/intl/zh-CN/chrome/
    WX20220707-134247@2x.png

    2.7 验证安装环境

    打开终端，执行flutter doctor -v，出现如下内容，表示Mac环境已配置完成
    WX20220707-150553@2x.png
    注意：如果遇到Android toolchain中提示licenses错误，执行错误里面提示的命令，需要确认多个y/n，输入y确认即可，重新运行flutter doctor -v。