flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開源的。

框架概況

Flutter是谷歌的移動UI框架 [4] ，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開源的。它也是構(gòu)建未來的Google Fuchsia [1] 應(yīng)用的主要方式。
Flutter組件采用現(xiàn)代響應(yīng)式框架構(gòu)建，這是從React中獲得的靈感，中心思想是用組件(widget)構(gòu)建你的UI。 組件描述了在給定其當(dāng)前配置和狀態(tài)時他們顯示的樣子。當(dāng)組件狀態(tài)改變，組件會重構(gòu)它的描述(description)，F(xiàn)lutter會對比之前的描述， 以確定底層渲染樹從當(dāng)前狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需要的最小更改。
 

發(fā)展歷史

Flutter的第一個版本被稱為“Sky”，運(yùn)行在Android操作系統(tǒng)是。它是在2015年Dart開發(fā)者峰會 [3] 上亮相的，其目的是能夠以每秒120幀的速度持續(xù)渲染。
Beta
Beta1版本于2018年2月27日在2018 世界移動大會公布 [5] 。
Beta2版本2018年3月6日發(fā)布 [6] 。

Windows

1. 下載安裝包

因為下載安裝包需要一定的時間，所以先把進(jìn)行安裝包的下載。可以去官網(wǎng)下載：Download Flutter 可以去 Flutter github 下載安裝包：Download Flutter Zip

2. 配置環(huán)境變量

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

在 等待下載 過程中配置一下環(huán)境變量

1. 右鍵我的電腦(此電腦) > 屬性 > 高級系統(tǒng)保護(hù)設(shè)置 > 高級 > 環(huán)境變量

2. 在 系統(tǒng)變量 下點(diǎn)擊新建（可以將上面代碼復(fù)制）：

在 下載完安裝包 后，

1. 把它解壓到你想安裝 Flutter SDK 的路徑（我是在 C:\src\flutter）
2. 在 系統(tǒng)變量 下檢查是否有名為“Path(PATH)”的條目: a. 如果該條目存在，左鍵雙擊擊進(jìn)入該項 編輯 > 新增 b. 如果條目不存在, 點(diǎn)擊下面 新建, 變量名為 Path ，變量值為 C:\src\flutter\bin

3. 運(yùn)行 Flutter doctor

1. 打開 Flutter console

2. 輸入 flutter doctor, 檢查還需要安裝的項目 如上圖，顯示 [X] 的為沒有安裝的項目

   • 如果是前端仔，建議用 VScode，跳到 VSCode Flutter 配置
   • 如果是安卓仔，那就直接可以用 Android Studio

4. 配置 VSCode

1. 打開命令面板(快捷鍵：Ctrl + Shift + P)
2. 安裝擴(kuò)展，搜索 flutter點(diǎn)擊安裝，發(fā)現(xiàn) Dart 也一起安裝好了
3. 驗證
   • 打開命令面板
   • 輸入 'doctor'，選擇 'Flutter: Run Flutter Doctor'
   • 查看 “OUTPUT” 窗口中的輸出是否有問題
4. 創(chuàng)建項目
   • 打開命令面板
   • 選擇 'Flutter: New Project'
   • 項目命名，遵循谷歌下劃線命名，使用駝峰命名會報錯

5. 配置移動設(shè)備

1. 將自己的手機(jī)連接到電腦，打開發(fā)者模式（連續(xù)點(diǎn)擊版本號）
2. 進(jìn)入開發(fā)者選項，打開 USB 調(diào)試（不同手機(jī)'開發(fā)者選項'在不同位置，自行百度）
3. 檢查是否連接成功
4. 按 F5 鍵或點(diǎn)擊 調(diào)試>啟動調(diào)試(Debug>Start Debugging)，等待手機(jī)出現(xiàn)畫面
5. 體驗熱重載
   • 打開 main.dart文件
   • 找到 home: new MyHomePage(title: 'Flutter Demo Home Page'),
   • 把 title 里的內(nèi)容改為 VSCode Flutter Demo
   • 保存(ctrl-s)， 就可以在手機(jī)上看到更改了

最新評論