一捶闸、基本介紹

Flutter 是谷歌公司開發(fā)的一款開源夜畴、免費的移動 UI 框架，可以讓我們快速的在 Android 和 iOS 上構(gòu)建高質(zhì)量 App删壮。它最大的特點就是跨平臺贪绘、以及高性能。

Flutter 基于谷歌的 dart 語言央碟，如果沒有任何 Dart 語言的基礎(chǔ)税灌，不建議直接學(xué)習(xí) Flutter。

建議先學(xué)習(xí) Dart 語言的基本語法亿虽，然后再進(jìn)入 Flutter 的學(xué)習(xí)菱涤。

Dart documentation | Dart

Dart基本語法參考 Demo

市面上已經(jīng)有很多的混合 App 開發(fā)框架了，但是有些混合 APP 開發(fā)框架主要是針對前端開 發(fā)者的:比如 ReactNative(基于 React)洛勉、Ionic(基于 Angular粘秆、Vue、React)收毫。有些則是 針對.Net 平臺針對.Net 開發(fā)者的比如:Xamarin

Flutter 是谷歌基于 Dart 語言開發(fā)的一款跨平臺的移動 App 開發(fā)框架翻擒。它針對的開發(fā)者是全 部開發(fā)者。它的性能相比 RN牛哺、Ionic 這樣的框架要好一些陋气，但是現(xiàn)在的手機(jī)設(shè)備上是看不出 任何區(qū)別的。

由于谷歌的推廣,以及國內(nèi)阿里的閑魚 App 是 Flutter 開發(fā)的引润。所以 Flutter 目前(2019 年 5 月 22)關(guān)注度非常高的框架巩趁。所以非常有必要學(xué)習(xí)。因為大家都在學(xué)，我們不學(xué)是不是就 有點 Out 了议慰。但是我們要知道的一點就是 Flutter 還比較年輕蠢古，相比 Ionic、以及 RN 這樣的 老框架來說社區(qū)不是特別完善别凹。還有就是學(xué)習(xí)成本高草讶。希望未來社區(qū)能更加完善、學(xué)習(xí)成本 更低炉菲。

二堕战、Windows 上面搭建 Flutter Android 運行 環(huán)境

1、電腦上面安裝配置 JDK

1.?下載安裝JDK

2. 配置 JDK

2.1 系統(tǒng)變量里面新增 JAVA_HOME拍霜，設(shè)置值為 java SDK 根目錄:

編輯系統(tǒng)變量

2.2 系統(tǒng)變量找到 Path 在 Path 環(huán)境變量里面增加如下代碼

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

2嘱丢、電腦上下載安裝 Android Studio

下載安裝 Android Studio

Android Studio圖標(biāo)

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

1.?下載 Flutter SDK

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

Flutter SDK 安裝目錄

3. 把 Flutter 安裝目錄的 bin 目錄配置到環(huán)境變量.

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

flutter目錄配置

4祠饺、電腦上配置 Flutter 國內(nèi)鏡像

搭建環(huán)境過程中要下載很多資源文件越驻，當(dāng)一些資源下載不了的時候，可能會報各種錯誤道偷。在

國內(nèi)訪問 Flutter 的時候有可能會受到限制缀旁，F(xiàn)lutter 官方為我們提供了國內(nèi)的鏡像

Flutter 社區(qū)中文資源

Using Flutter in China - Flutter

拉到 Flutter 中文網(wǎng)最下面有配置方式，把下面兩句配置到環(huán)境變量里面

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

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

Flutter?國內(nèi)的鏡像環(huán)境配置

5勺鸦、運行 flutter doctor 命令檢測環(huán)境是否配置成功

檢測環(huán)境是否配置成功

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

錯誤提示

這個時候復(fù)制上面紅色框框內(nèi)的命令

flutter doctor --android-licenses

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

解決錯誤

6并巍、打開 Android Studio 安裝 Flutter 插件

選擇插件菜單

搜索 flutter 插件

安裝 flutter

安裝 Dart 插件

重啟 Android Studio

?7、創(chuàng)建 Flutter 項目

選擇 Flutter 項目

選擇 Flutter App 項目

設(shè)置路徑

配置

8祝旷、Android Studio 中導(dǎo)入 Flutter 項目履澳，運行項目

open an existing Android Studio project

下載 gradle 壓縮包

已下在 gradle 壓縮包

使用 gradle

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

重新下載 Gradle

如果彈出下面界面點擊中間的怀跛，不然它又會重新下載 Gradle，等我們開發(fā)完成沒事的時候升級柄冲。

暫不更新

連上手機(jī)真機(jī)調(diào)試

?9吻谋、可能遇到的錯誤

Gradle 提示

下載 Gradle 失敗

下載 Gradle 失敗解決方案:

1. 開啟手機(jī)熱點重試

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