篮球公园经典百战扣篮
當前位置:首頁 > 安卓源碼 > 技術博客 >

Flutter即學即用環境搭建

時間:2019-10-18 00:57 來源:互聯網 作者:源碼搜藏 瀏覽: 收藏 挑錯 推薦 打印

前言 工欲善其事,必先利其器 所以第一篇我們來說說 Flutter 環境的搭建。 筆者這邊使用的是 MAC 電腦,因此以 MAC 電腦的環境搭建為例。 Windows 或者 Linux 也是類似的操作。 Flutter 有英文版的官網和中文網,大家可以根據自己的喜好和情況進行選擇。 點

前言

工欲善其事,必先利其器

所以第一篇我們來說說 Flutter 環境的搭建。

筆者這邊使用的是 MAC 電腦,因此以 MAC 電腦的環境搭建為例。

Windows 或者 Linux 也是類似的操作。

Flutter 有英文版的官網和中文網,大家可以根據自己的喜好和情況進行選擇。

點擊下面的鏈接可以到對應的安裝頁面。

Flutter 官網安裝鏈接:https://flutter.io/docs/get-started/install

Flutter 中文網安裝鏈接:https://flutterchina.club/get-started/install/

我們這邊以官網為例進行說明。

目錄

Flutter即學即用環境搭建

 

1. 配置鏡像

點擊進入官網,可以看到下圖:

Flutter即學即用環境搭建

 

我們點擊 Using Flutter in China 進入:

Flutter即學即用環境搭建

 

可以看到主要是讓我們配置鏡像站點。

所以我們就將要求的兩個環境變量添加到系統就可以了。

打開 terminal,看下當前用戶下面是否有 bash_profile 文件,執行命令:

vi ~/.bash_profile

如果底部有

"~/.bash_profile" [New File]

說明之前沒有存在過這個文件。

不管之前是否存在過該文件,我們在末尾追加上面的兩個環境變量即可。

如果不熟悉 vi 操作,可以參考下面兩篇文章或者額外了解。

linux Vi操作和使用方法詳解

Linux vi/vim

將上面兩個環境變量添加到 bash_profile 文件,文件新增的兩行應該類似下面(鏡像地址可能有變動,以上面官網為主,筆者此刻就是下面的):

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

接著執行命令:

source ~/.bash_profile 
echo $PUB_HOSTED_URL

如果打印出了你輸入的鏡像,說明沒有問題,設置成功了。

主要目的是追加兩個環境變量,如果你習慣用文件打開,也可以打開文件后直接追加

回到安裝頁面,點擊 macOS。

2. 獲取 Flutter SDK

Flutter即學即用環境搭建

 

從圖中可以看到,當前的目標是獲取 Flutter SDK。

點擊藍色按鈕,下載 Flutter SDK。

下載完成之后解壓到自己想放置的目錄(建議路徑不要包含中文)。

這里假設我們將壓縮包解壓到的路徑為 ~/flutter。

首先把下載下來的壓縮包移動到 ~/flutter。

我這邊下載的壓縮包為flutter_macos_v1.0.0-stable.zip,執行命令

unzip flutter_macos_v1.0.0-stable.zip

執行完成之后可以看到當前目錄多了一個 flutter 文件夾。

接下來就是要把 flutter 設置到環境變量以便在任何地方都可以執行 flutter 命令。

執行如下命令:

cd flutter/ 
pwd

控制窗口會打印 flutter 根目錄。我這邊為/Users/nesger/flutter/flutter。

跟上面設置兩個環境變量操作類似,首先打開文件~/.bash_profile。

添加下面語句:

export FLUTTER_ROOT=/Users/nesger/flutter/flutter
export PATH=$FLUTTER_ROOT/bin:$PATH

這里定義了 flutter 根目錄并將其下面的 bin 目錄設置到 PATH 里面。

保存退出后執行

source ~/.bash_profile

NOTE:執行該命令后你當前窗口和新開的窗口就都可以直接運行 flutter 命令了。但是之前開的窗口就不可以了。如果需要之前的窗口也可以,就需要在對應窗口執行上面的 source ~/.bash_profile 命令

3. 執行 flutter doctor 完善相關工具鏈

運行

flutter doctor

會打印 flutter 需要的工具鏈是否完善。(NOTE: 這個命令后面會多次用到)

Flutter即學即用環境搭建

 

可以看出一些端倪。

顯示一些警告。

按照上面提示進行處理即可。

舉個例子:

✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

這邊說 Android licenses 沒有 accepted,執行

flutter doctor --android-licenses

然后不斷點擊 y 表示同意就可以了。

我們運行之后,再使用

flutter doctor

可以看到已經修復了

Flutter即學即用環境搭建

 

接下來就是 iOS toolchain 以及 Android Studio 兩個插件的安裝。

對于 Android 開發來說,其實 iOS toolchain 不修復也沒問題。

我們先修復 flutter 插件安裝。

NOTE:Android Studio 版本需要 3.0 或者更高版本,不然會有坑,這邊為了演示一下坑及遇到的解決方法。所以這邊先用版本 2.3.3 進行演示。讀者最好先升級版本到 3.0。步驟是一樣的。

Flutter即學即用環境搭建

 

第一步:Android Studio->Preferences

Flutter即學即用環境搭建

 

第二步:點擊左側 Plugins

Flutter即學即用環境搭建

 

第三步:輸入 flutter,點擊 Search in repositories

Flutter即學即用環境搭建

 

第四步:點擊 Install

Flutter即學即用環境搭建

 

第五步:dart 一起安裝

安裝完成之后重啟 Android Studio,然后在終端執行命令

flutter doctor
Flutter即學即用環境搭建

 

可以看到 Flutter 插件安裝好了,只不過這里提示版本不夠新。

如果你的 Android Studio 版本為 3.0 或者更高,就不會報錯,那么可以忽略下面的修復步驟。

修復步驟:

重啟 Android Studio 并沒有看到直接創建 Flutter 項目。

筆者這邊 Android Studio 版本為 2.3.3。

而 Flutter 需要 Android Studio 3.0 或者更高版本支持。

這邊更新 Android Studio 之后重啟。

可以看到執行 flutter doctor 命令之后 Android Studio 確實是 3.3 版本了。

Flutter即學即用環境搭建

 

但是 Flutter 依然不是最新的,需要到 plugins 去更新。

此外,還需要更新 dart。

更新完之后就可以看到創建 Flutter 項目了。

Flutter即學即用環境搭建

 

到了這里基本上對于 Android 開發的你來說環境搭建就完成了。

Flutter即學即用環境搭建

 

4. 擴展

可以看到上面有個 iOS toolchain,基于下面幾點,我想修復這個。

  1. 我的機器安裝了 Xcode。
  2. 剛接觸 Flutter,想多點嘗試,也想看看 Flutter 代碼在 iOS 運行效果。
  3. 聽說 iOS 開發都用模擬器,想體驗下 iOS 模擬器。
  4. Android 的模擬器大家都懂,反正我大部分是用真機調試。

所以按照上面的提示,Xcode 完全安裝以及運行相應命令。

但是遇到了一個坑,就是依然報錯。

所以我直接將提示的命令一步執行,結果可以了。

在 GitHub 上面還幫助到了一個 iOS 開發者。

flutter doctor 提示 iOS toolchain 有些錯誤:https://github.com/nesger/FlutterNote/issues/1

更多環境搭建問題和解決方案大家都可以提 issue 哦~

也許別人剛好就解決了你遇到的問題

Flutter即學即用環境搭建 轉載http://www.vrifwh.tw/appboke/44081.html

技術博客閱讀排行

最新文章

篮球公园经典百战扣篮
网络捕鱼开始赢了几万 北京十一选五 银河电玩城官网下载 wnba比分结果允许平局 湖南快乐十分走势图电视图横屏 竞彩篮球大小分走势图 彩票浙江快乐12玩法介绍 快乐扑克概率 2012欧洲足球直播 地下城勇士单机版