PS：轉(zhuǎn)載請注明出處
作者: TigerChain
地址: http://m.itdecent.cn/p/2ce72f989e74
本文出自 TigerChain 簡書 從頭開始整 Flutter系列
教程簡介
- 1、閱讀對象
本篇教程適合新手閱讀，老手直接略過 - 2、教程難度
初級(jí)，本人水平有限，文章內(nèi)容難免會(huì)出現(xiàn)問題，如果有問題歡迎指出，謝謝
正文
一、什么是 Flutter
1、移動(dòng)端幾種開發(fā)模式
在說 flutter 是什么之前，我們先來看看目前移動(dòng)端開發(fā)幾種模式
- 1、純原生開發(fā)「即 native 開發(fā)」
- 2、純的 webapp
- 3、hybrid 混合式開發(fā)
除了第 1 個(gè)原生開發(fā)外，其余的兩個(gè)現(xiàn)在基本上有兩個(gè)方案，一種是基于原生的 webview 去做擴(kuò)展和開發(fā)，第二種是使用 jsbridge 方案來直接調(diào)用原生控件來渲染
cordova appcan mui 等就是基于 webview 來擴(kuò)展來使用 html、js來完成界面效果，這種方案性能是一個(gè)硬商，并且如 cordova 等如果有些功能不能滿足我們還需要自定義原生去擴(kuò)展插件功能，在這里 webview 的缺點(diǎn)都會(huì)體現(xiàn)出來
jsbridge 為代表的是 ReactNative、Weex ,沒有 webview 直接把渲染工作交給系統(tǒng)去完成，這樣性能就大大提升，但是跨平臺(tái)特性不徹底，有時(shí)需要針對不同平臺(tái)寫不同的代碼，并且開發(fā)者如果是一個(gè)人需要掌握 IOS/Android 兩個(gè)平臺(tái)的原生開發(fā)，但是 jsbridge 也是需要代價(jià)的這塊也會(huì)有性能問題，那么有沒有可以有原生體驗(yàn)，又不用 webview 和 jsbridge 當(dāng)然有，native 開發(fā)「這不廢話嗎」，其實(shí) flutter 就是在這種思路下誕生的
2、flutter 是什么
flutter 是 Google 開源的一個(gè)可以高質(zhì)量的編寫 IOS/Android 的移動(dòng) UI 框架，flutter 重寫了一套 UI 杠架，不基于 webview 也不基于 jsbridge ,是從頭到尾徹底重寫了甚至還包括他的開發(fā)語言「Dart 反正效率比 js 高」,它的渲染引擎是基于跨平臺(tái)的 Skia 圖形庫來實(shí)現(xiàn)，可以簡單的理解 flutter 上面的界面就是直接使用 canvas 畫出來的
二、flutter 開發(fā)環(huán)境
flutter 可以在 Mac/Windows/Linux 上進(jìn)行開發(fā)，由于個(gè)人電腦是 mac 電腦，所以以 mac 環(huán)境來說一下「其它平臺(tái)類似」，總體來說就以下三步
1、下載 Mac 環(huán)境下的 flutter 安裝包
下載地址：https://flutter.io/docs/get-started/install/macos
點(diǎn)擊下載即可
2、解壓安裝包并且配置環(huán)境變量
把下載下來的 .zip 安裝包解壓到指定目錄比如 installSoftWare
配置環(huán)境變量在 .bash_profile 或 .zshrc 中添加
export PATH="$PATH:/`pwd`/installSoftWare/flutter/bin"
其中 pwd 就是你在命令行默認(rèn)界面 pwd 中出來的命令，一般是 /User/XXX，然后保存文件，基本上 flutter 就可以使用了，我們可以在命令行中試一下 flutter 命令
3、安裝 flutter 依賴
經(jīng)過上面兩步 flutter 安裝完成了，但是還需要安裝一些依賴，我們配置完以后運(yùn)行 flutter doctor 來檢查一下缺少的依賴
如圖所示，我這里是把所需要的依賴安裝完了，不是最初的狀態(tài)，你直接運(yùn)行會(huì)報(bào)好多 x 可以選擇根據(jù)自己需要的安裝，比如拿 AndroidStudio 開發(fā)那就安裝 AndroidStudio 的依賴「在 AS 的 Plugins 中安裝 flutter 即可」，在 Vs Code 中開發(fā)安裝 flutter 插件即可，根據(jù)自己需要安裝即可只要前第一個(gè)沒有問題你配置個(gè) Android/IOS 環(huán)境再加一個(gè)開發(fā) IDE 依賴就可以了，這沒什么好說的，如果有 x 號(hào)會(huì)提示你如何解決的
三、來個(gè) Demo 試一下
這里我們使用兩種方式來創(chuàng)建 flutterdemo 項(xiàng)目
1、使用命令行創(chuàng)建
為了方便演示，我們在 Destop 創(chuàng)建一個(gè) flutterdemo 項(xiàng)目，使用 flutter create xxx「項(xiàng)目名」 來創(chuàng)建項(xiàng)目
cd ~
cd Desktop
flutter create flutterdemo // 創(chuàng)建一個(gè) flutter 項(xiàng)目
這樣我們就創(chuàng)建出第一個(gè) flutter 項(xiàng)目，在這期間我還偷偷的把 IOS 環(huán)境也安裝了「嘿嘿」
注意： flutter 在獲取 package 的時(shí)候可能會(huì)非常慢，這一點(diǎn)官方也考慮到了，我們直接看 https://flutter.io/community/china 中說的非常詳細(xì)，國內(nèi)用戶還需要在環(huán)境變量中配置以下內(nèi)容「怎么樣貼心吧」
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
根據(jù)提示，我們來進(jìn)入到項(xiàng)目中然后 run 一下，看看效果
cd flutterdemo
flutter run
很不幸，沒有運(yùn)行起來，大概意思就是我們沒有啟動(dòng)模擬器或真機(jī)，沒事跟著提示走，運(yùn)行 flutter emulators 查看有那些模擬器
flutter emulators
可以看到我本地有一個(gè) Android 模擬器和 一個(gè) IOS 模擬器，那么接下來我們就可以啟動(dòng)模擬器了，當(dāng)然前提是你必須有模擬器，如果沒有先創(chuàng)建可以根據(jù)命令提示創(chuàng)建也可以在 AndroidStudio/Xcode 中創(chuàng)建效果一樣，當(dāng)然你也可以直接使用真機(jī)測試
使用 flutter emulators --launch <emulator id> 啟動(dòng)模擬器，在我本機(jī)我啟動(dòng)了我的 Android 模擬器
flutter emulators --launch Nexus_5_API_25
你可以對應(yīng)自己的模擬器去開啟
再次運(yùn)行 flutter run
flutter run
沒什么問題就會(huì)運(yùn)行起來，在 Android 模擬器上我們創(chuàng)建的 Demo 張這個(gè)樣子
在 IOS 模擬器上張這個(gè)樣子
如果 Android 和 IOS 模擬器都運(yùn)行起來了，那么執(zhí)行 flutter run 的時(shí)候會(huì)提示讓你選擇使用那個(gè)模擬器來運(yùn)行項(xiàng)目
flutter run -d <deviceId>
使用此命令來選擇運(yùn)行那個(gè)模擬器其中 deviceId 對應(yīng)上圖中紅色箭頭指出的值，總之運(yùn)行 flutter run 如果沒有模擬器等等它會(huì)自動(dòng)提示，你按照提示完成即可
2、使用VsCode 創(chuàng)建項(xiàng)目
打開 vscode 創(chuàng)建按 ctrl/command +shift +p 輸入 flutter 就會(huì)看到和 flutter 相關(guān)的一些命令「前提是你要在 vscode 中安裝 flutter 插件」
我們可以看到 flutter 的命令，我們直接使用 New Project 來創(chuàng)建一個(gè) flutter 項(xiàng)目，然后選擇一個(gè)目錄或是創(chuàng)建一個(gè)目錄來放置 flutter 項(xiàng)目，我這里在桌面上創(chuàng)建了一個(gè) vscodeflutter 目錄，然后就會(huì)自動(dòng)創(chuàng)建出 flutter 的項(xiàng)目，張這個(gè)樣子
這樣我們就成功的在 vscode 中創(chuàng)建了一個(gè) flutter 項(xiàng)目，此時(shí)我們再使用 ctrl/command +shift +p 輸入 flutter 命令可看一下
我們可以看到我們創(chuàng)建了項(xiàng)目以后會(huì)多出幾條命令，我們可以選擇相應(yīng)的命令比如加載模擬器等，然后我們我們打開 vscode 的 命令行輸入 flutter run 來運(yùn)行項(xiàng)目
同樣項(xiàng)目可以運(yùn)行起來
3、其它開發(fā)環(huán)境
除了以上兩種方式我們也可以使用 AndroidStudio 來創(chuàng)建 flutter 項(xiàng)目，我也在 Android 插件中安裝了 flutter 就可以創(chuàng)建 flutter 項(xiàng)目了「它就會(huì)有 flutter 創(chuàng)建項(xiàng)目模版」，和創(chuàng)建一個(gè)普通的 Android 項(xiàng)目非常類似，同樣可以在 AndroidStudio 啟動(dòng)以后去創(chuàng)建，或是打開一個(gè)項(xiàng)目然后選擇
或打開某個(gè)工程中去創(chuàng)建
都是一樣的，然后下一步操作即可，以上就把 flutter 的配置和創(chuàng)建介紹完了下面總結(jié)一下
四、總結(jié)、擴(kuò)展
這節(jié)我們說了一下 flutter 的環(huán)境配置，基本上按照官方的步驟一步步來沒有什么問題，就是要注意一下可能會(huì)出現(xiàn)一個(gè)依賴或插件安裝時(shí)"卡死"的問題，這就需要科學(xué)上網(wǎng)或是使用 flutter 給國內(nèi)開發(fā)得提供的配置通道基本上都能一路配置成功，大概總結(jié)一下
1、flutter 高性能、跨平臺(tái)
flutter 是一個(gè)高性能的跨平臺(tái)解決方案「徹底跨平臺(tái)」，完全重寫了底層沒有 webview 沒有 jsbridge 采用 canvas 直接繪制界面采用 gpu 去渲染，這也是不同于 RN ，Weex 和基于 webview 的 H5 開發(fā)，flutter 完全是另辟蹊徑
2、flutter 的開發(fā)環(huán)境
支持命令行、vscode/AndroidStudio/IDE 開發(fā)環(huán)境，安裝配置也非常簡單，我們可以選擇自己喜歡的 IDE 去配置和開發(fā)即可
3、flutter 目前現(xiàn)狀
(1)、沒有大規(guī)模使用
目前來說 flutter 沒有大規(guī)模的使用，都是一些大公司在調(diào)研和使用國外有 Google 等，國內(nèi) BAT 等都在調(diào)研，特別是阿里在推進(jìn) flutter 的使用，都是使用 flutter 來開發(fā)某幾個(gè)界面或是模塊「基本上也是試試水這里面有客觀也有主觀的因素」，比如阿里將閑魚的幾個(gè)界面就拿 flutter 重構(gòu)了「也是調(diào)研了試試水，據(jù)說還行」，這不難理解，一個(gè)新的東西起來是需要時(shí)間的
（2）、社區(qū)和三方插件少
由于 flutter 的社區(qū)沒有像 RN 等那樣龐大和活躍，所以一些解決方案和三方插件比較少，特定的功能可能要自己去寫，遇到問題也要自己去填坑，相信這隨著時(shí)間的推進(jìn)也都會(huì)改善
4、該不該使用 flutter
先學(xué)會(huì)了再說吧，只有學(xué)到了才知道該使用它還是不能使用，沒有最好的框和最牛 B 的技術(shù)只有結(jié)合公司實(shí)際情況來選擇最適合公司的框架和技術(shù)才是王道「這句話我說了不下十遍」
對新的技術(shù)敬畏和好奇沒什么壞處，學(xué)了能給技術(shù)選型加一個(gè)方案并且在大前端的背景下掌握 flutter 也沒什么壞處并且在 Google 這樣體量的公司之下去推 flutter 相信 flutter 會(huì)越走越好，別廢什么話了，直接干就對了
到此為止，F(xiàn)lutter 的環(huán)境搭建就完成了
作者: TigerChain 訂閱查看更多內(nèi)容
本文出自 TigerChain 從頭開始整 Flutter
