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

時間 2019-11-10

標籤 flutter 徐徐搭建開發環境 hello world 简体版

原文原文鏈接

1、環境變量android

因爲衆所周知的緣由，在國內訪問 Flutter 有時可能會受到限制，因此在開發以前，須要先配置環境變量git

MacOS:github

編輯 ~/.bash_profile 文件macos

vim ~/.bash_profile

這裏用的是 vim 來編輯，若是不習慣，能夠將 vim 替換爲 openvim

open ~/.bash_profile

添加如下代碼並保存windows

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

而後執行命令xcode

source ~/.bash_profile

Windows:bash

1. 計算機 -> 屬性 -> 高級系統設置 -> 環境變量，打開環境變量設置框；網絡

2. 在用戶變量下，選擇新建環境變量，添加以下的兩個環境變量和值：app

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

2、搭建 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 工具，這是開發人員的標配，就再也不贅述

3、搭建 IOS 開發環境

若是已經安裝過 Xcode，能夠跳過這一節

IOS 只能在 MacOS 上開發，能夠到 App Store 下載一個 Xcode（須要 9.0 及以上版本）

App Store 上只有最新版的 Xcode，若是須要歷史版本，能夠訪問蘋果開發者平臺

而後在終端執行如下命令，簽署 Xcode 協議：

sudo xcodebuild -license

安裝完 Xcode 以後，就能夠將 Flutter 編譯成 iOS 安裝包了

4、下載 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

環境變量配好以後，執行如下命令