Flutter 01 - 基本介紹、Windows 上面搭建 Flutter Android 運行環境

一、基本介紹

Flutter 是谷歌公司開發的一款開源、免費的移動 UI 框架,可以讓我們快速的在 Android 和 iOS 上構建高質量 App。它最大的特點就是跨平臺、以及高性能。

Flutter 基于谷歌的 dart 語言,如果沒有任何 Dart 語言的基礎,不建議直接學習 Flutter。

建議先學習 Dart 語言的基本語法,然后再進入 Flutter 的學習。

Dart documentation | Dart

Dart基本語法參考 Demo

市面上已經有很多的混合 App 開發框架了,但是有些混合 APP 開發框架主要是針對前端開 發者的:比如 ReactNative(基于 React)、Ionic(基于 Angular、Vue、React)。有些則是 針對.Net 平臺針對.Net 開發者的比如:Xamarin

Flutter 是谷歌基于 Dart 語言開發的一款跨平臺的移動 App 開發框架。它針對的開發者是全 部開發者。它的性能相比 RN、Ionic 這樣的框架要好一些,但是現在的手機設備上是看不出 任何區別的。

由于谷歌的推廣,以及國內阿里的閑魚 App 是 Flutter 開發的。所以 Flutter 目前(2019 年 5 月 22)關注度非常高的框架。所以非常有必要學習。因為大家都在學,我們不學是不是就 有點 Out 了。但是我們要知道的一點就是 Flutter 還比較年輕,相比 Ionic、以及 RN 這樣的 老框架來說社區不是特別完善。還有就是學習成本高。希望未來社區能更加完善、學習成本 更低。

二、Windows 上面搭建 Flutter Android 運行 環境

1、電腦上面安裝配置 JDK

1.?下載安裝JDK

2. 配置 JDK

2.1 系統變量里面新增 JAVA_HOME,設置值為 java SDK 根目錄:

編輯系統變量

2.2 系統變量找到 Path 在 Path 環境變量里面增加如下代碼

;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin?

2、電腦上下載安裝 Android Studio

下載安裝 Android Studio


Android Studio圖標

3、電腦上面下載配置 Flutter SDK

1.?下載 Flutter SDK

2. 把下載好的 Flutter SDK 減壓到你想安裝 SDK 的目錄如(E:\flutter_windows\flutter)

Flutter SDK 安裝目錄

3. 把 Flutter 安裝目錄的 bin 目錄配置到環境變量.

如上圖所示需要把 E:\flutter_windows\flutter\bin 目錄配置到 path 環境變量里面

flutter目錄配置

4、電腦上配置 Flutter 國內鏡像

搭建環境過程中要下載很多資源文件,當一些資源下載不了的時候,可能會報各種錯誤。在

國內訪問 Flutter 的時候有可能會受到限制,Flutter 官方為我們提供了國內的鏡像

Flutter 社區中文資源

Using Flutter in China - Flutter

拉到 Flutter 中文網最下面有配置方式,把下面兩句配置到環境變量里面

FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn

PUB_HOSTED_URL: https://pub.flutter-io.cn

Flutter?國內的鏡像環境配置


5、運行 flutter doctor 命令檢測環境是否配置成功

檢測環境是否配置成功

第一次運行的時候會提示下面錯誤:

錯誤提示

這個時候復制上面紅色框框內的命令

flutter doctor --android-licenses

注意:提示輸入 Y/N 的地方全部輸入 Y

解決錯誤

6、打開 Android Studio 安裝 Flutter 插件

選擇插件菜單
搜索 flutter 插件
安裝 flutter
安裝 Dart 插件
重啟 Android Studio

?7、創建 Flutter 項目

選擇 Flutter 項目
選擇 Flutter App 項目
設置路徑
配置

8、Android Studio 中導入 Flutter 項目,運行項目

open an existing Android Studio project
下載 gradle 壓縮包
已下在 gradle 壓縮包
使用 gradle

如果報錯點擊 File -> Sync Project With Gradle Files 重新下載 Gradle ,這個過程比較慢 10-30 分 鐘左右。

重新下載 Gradle

如果彈出下面界面點擊中間的,不然它又會重新下載 Gradle,等我們開發完成沒事的時候升級。

暫不更新
連上手機真機調試

?9、可能遇到的錯誤

Gradle 提示
下載 Gradle 失敗

下載 Gradle 失敗解決方案:

1. 開啟手機熱點重試

2. 谷歌或者百度搜索 “android Gradle 編譯時下載依賴失敗”

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。