Flutter 徐徐图之（一）—— 从搭建开发环境到 Hello World

时间：2019-10-03 00:50:36 阅读：422 评论：0 收藏：0 [点我收藏+]

一、环境变量

由于众所周知的原因，在国内访问 Flutter 有时可能会受到限制，所以在开发之前，需要先配置环境变量

MacOS:

编辑 ~/.bash_profile 文件

vim ~/.bash_profile

这里用的是 vim 来编辑，如果不习惯，可以将 vim 替换为 open

open ~/.bash_profile

添加以下代码并保存

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

然后执行命令

source ~/.bash_profile

Windows:

1. 计算机 -> 属性 -> 高级系统设置 -> 环境变量，打开环境变量设置框；

2. 在用户变量下，选择新建环境变量，添加如下的两个环境变量和值：

key	value
FLUTTER_STORAGE_BASE_URL	https://storage.flutter-io.cn
PUB_HOSTED_URL	https://pub.flutter-io.cn

二、搭建 Android 开发环境

如果已经安装过 Androdi Studio，可以跳过这一节

首先安装 Androdi Studio，会自带 Android SDK，但还需要配置环境变量

打开 AS，选择 Confiure -> SDK Manager

技术图片

然后就能查看到 SDK 的地址

技术图片

然后开始配置环境变量

MacOS:

按上面提到的办法编辑 ~/.bash_profile 文件，将下面的代码添加到文件中并保存

export ANDROID_HOME=/Users/{YourUserName}/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

记得把 ANDROID_HOME 设置为上面的 SDK 地址，这里只保存文件，不要用 source 命令执行

Windows：

我们需要添加的代码为

(替换成 Android SDK 路径)/tools;(替换成 Android SDK 路径)/platform-tools

1. 计算机 -> 属性 -> 高级系统设置 -> 环境变量，打开环境变量设置框

2. 在用户变量下，选择 Path，点击编辑

如果没有 Path 变量，则新建一个名为 Path 的用户变量，直接添加上面的代码

如果已经存在 Path 变量，则在原有的值后面先加一个分号 ; ，然后将上面的代码添加到 Path

记得替换 Android SDK 路径！！！

然后可以打开 AS，选择 Confiure -> AVD Manager，按照提示创建一个模拟器

另外，Flutter 还需要安装 Git 工具，这是开发人员的标配，就不再赘述

三、搭建 IOS 开发环境

如果已经安装过 Xcode，可以跳过这一节

IOS 只能在 MacOS 上开发，可以到 App Store 下载一个 Xcode（需要 9.0 及以上版本）

App Store 上只有最新版的 Xcode，如果需要历史版本，可以访问苹果开发者平台

然后在终端执行以下命令，签署 Xcode 协议：

sudo xcodebuild -license

安装完 Xcode 之后，就可以将 Flutter 编译成 iOS 安装包了

四、下载 Flutter SDK

在 Flutter SDK 的下载页面选择合适的版本，如果有需要，也可以访问 Flutter 的 GitHub 仓库

将下载的压缩包解压到任意目录下，然后将 Flutter 目录添加到 Path 环境变量

MacOS:

按上面提到的办法编辑 ~/.bash_profile 文件，将下面的代码添加到文件末尾并保存

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

记得将 `pwd` 改为 Flutter 文件夹所在到目录！！！

如果拿不准完整路径，可以在终端进入 Flutter 目录，然后通过 pwd 命令查看完整路径

然后执行命令

source ~/.bash_profile

Windows:

1. 计算机 -> 属性 -> 高级系统设置 -> 环境变量，打开环境变量设置框；

2. 在用户变量下，编辑 Path 变量，在原有的值后面先加一个分号 ; ，然后将 Flutter SDK 的完整路径添加到 Path

??路径要指向 bin 目录，比如 Flutter 的目录是 D:\work\flutter ，是就需要添加 D:\work\flutter\bin

这里贴一个我自己的 .bash_profile 文件的内容

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export ANDROID_HOME=/Users/wise.wrong/Library/Android/sdk
export PATH=$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$PATH
export PATH=/Users/wise.wrong/work/flutter/bin:$PATH

环境变量配好之后，执行以下命令