Flutter學(xué)習(xí)筆記01

[TOC]

1. 跨平臺技術(shù)的發(fā)展歷史

1.1 跨平臺技術(shù)

跨平臺技術(shù)是軟件工程發(fā)展到一定階段的產(chǎn)物刷袍，即一個操作系統(tǒng)下開發(fā)的應(yīng)用案训，放到另一個操作系統(tǒng)下依然可以運行伦腐，即不依賴于操作系統(tǒng)家浇，也不依賴硬件環(huán)境。典型的跨平臺編程語言有java和python刨晴，它們依賴于底層的虛擬機（或解釋器）得以在多種系統(tǒng)下開發(fā)矛物，運行和維護茫死。

盡管java和python語言編寫的前端UI應(yīng)用程序一般也能跨平臺運行，但它們更多地被用于后端業(yè)務(wù)軟件系統(tǒng)開發(fā)的應(yīng)用場景泽谨。隨著移動互聯(lián)網(wǎng)大潮的興起璧榄，ios特漩、android等移動操作系統(tǒng)在移動客戶端被大量使用，2013年移動設(shè)備的裝機量首次超越PC骨杂，行業(yè)需求催生了跨平臺前端技術(shù)的發(fā)展涂身。

1.2 跨平臺前端框架

目前，前端狂平臺框架分為兩類搓蚪，一類是以WebApp框架蛤售，另一類是移動App框架。

目前主流的WebApp框架包括Cordova妒潭、Inonic悴能、Dcloud、小程序等幾種雳灾，移動App由Facebook公司推出的React native漠酿、阿里推出的Weex以及本文要重點介紹的谷歌公司推出的Flutter。

2.FLutter簡介

在 2017年的谷歌 I/O大會上谎亩，Google推出了Flutter —— 一款新的用于創(chuàng)建移動應(yīng)用的開源庫炒嘲。在2018年初世界移動大會上發(fā)布了 Flutter的第一個Beta版本，2018年5月的 I/O大會上更新到了Beta3版本匈庭，向正式版又邁進了一步夫凸。一時間業(yè)內(nèi)對這個框架的關(guān)注度越來越高。

Flutter可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面阱持。 Flutter可以與現(xiàn)有的代碼一起工作夭拌。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用衷咽，并且Flutter是完全免費鸽扁、開源的。它也是構(gòu)建未來的Google Fuchsia 應(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)所需要的最小更改噪生。

3.Windows系統(tǒng)下Flutter開發(fā)環(huán)境的安裝部署

3.1 下載Flutter SDK

1. 在Flutter官網(wǎng)下載最新可用的安裝包，有Beta、Dev和Master幾個版本可以選擇够吩，一般Beta是比較穩(wěn)定的版本砍聊，這里選擇Beta版本页藻。

1541216591797.png

2. 將安裝包zip解壓到你想安裝Flutter SDK的路徑（如：C:\src\flutter；注意植兰，不要將flutter安裝到需要一些高權(quán)限的路徑如C:\Program Files\）份帐。
3. 在Flutter安裝目錄的flutter文件下找到flutter_console.bat，雙擊運行并啟動flutter命令行楣导，接下來废境，你就可以在Flutter命令行運行flutter命令了。

3.2更新環(huán)境變量

要在終端運行 flutter 命令筒繁， 你需要添加以下環(huán)境變量到系統(tǒng)PATH：

• 轉(zhuǎn)到 “控制面板>用戶帳戶>用戶帳戶>更改我的環(huán)境變量”
• 在“用戶變量”下檢查是否有名為“Path”的條目:
  • 如果該條目存在, 追加 flutter\bin的全路徑噩凹，使用 ; 作為分隔符.
  • 如果條目不存在, 創(chuàng)建一個新用戶變量 Path ，然后將 flutter\bin的全路徑作為它的值.
• 在“用戶變量”下檢查是否有名為”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的條目毡咏，如果沒有驮宴，也添加它們。

重啟Windows以應(yīng)用此更改呕缭。

1541217219951.png

3.3 運行 flutter doctor

• 打開一個新的命令提示符或PowerShell窗口并運行以下命令以查看是否需要安裝任何依賴項來完成安裝：

1541224320721.png

3.4 安裝Flutter堵泽、Dart插件

3.4.1 Android Studio 安裝

Android Studio: 為Flutter提供完整的IDE體驗

1. 安裝Android Studio

• Android Studio, 3.0或更高版本.

或者，您也可以使用IntelliJ：

• IntelliJ IDEA Community, version 2018.2或更高版本.
• IntelliJ IDEA Ultimate, version 2018.2 或更高版本.

3.4.2 安裝Flutter和Dart插件

需要安裝兩個插件:

• Flutter插件： 支持Flutter開發(fā)工作流 (運行臊旭、調(diào)試落恼、熱重載等).
• Dart插件： 提供代碼分析 (輸入代碼時進行驗證、代碼補全等).

要安裝這些:

1. 啟動Android Studio.

2. 打開插件首選項 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).

3. 選擇 Browse repositories…, 選擇 Flutter 插件并點擊 install.

4. 重啟Android Studio后插件生效.

1541225383155.png

1541225697811.png

4. 第一個Flutter應(yīng)用

1. 打開idea新建一個工程离熏，選擇Flutter,點擊Next

   
   
   [圖片上傳中...(1541226214925.png-d7e2c9-1541238672272-0)]

2. 點擊Finish

   
   
   1541226214925.png

3. 修改\flutter\packages\flutter_tools\gradle\flutter.gradle

1541238006495.png

4. 編譯運行

1541238183265.png