Flutter 徐徐圖之（一）—— 從搭建開發環境到 Hello World

本文轉載自查看原文 2019-10-02 22:27 312 移動端/ Flutter/ javascript

一、環境變量

由於眾所周知的原因，在國內訪問 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

環境變量配好之后，執行以下命令