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

[TOC]

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

1.1 跨平臺(tái)技術(shù)

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

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

1.2 跨平臺(tái)前端框架

目前，前端狂平臺(tái)框架分為兩類，一類是以WebApp框架，另一類是移動(dòng)App框架。

目前主流的WebApp框架包括Cordova、Inonic、Dcloud、小程序等幾種，移動(dòng)App由Facebook公司推出的React native、阿里推出的Weex以及本文要重點(diǎn)介紹的谷歌公司推出的Flutter。

2.FLutter簡(jiǎn)介

在 2017年的谷歌 I/O大會(huì)上，Google推出了Flutter —— 一款新的用于創(chuàng)建移動(dòng)應(yīng)用的開(kāi)源庫(kù)。在2018年初世界移動(dòng)大會(huì)上發(fā)布了 Flutter的第一個(gè)Beta版本，2018年5月的 I/O大會(huì)上更新到了Beta3版本，向正式版又邁進(jìn)了一步。一時(shí)間業(yè)內(nèi)對(duì)這個(gè)框架的關(guān)注度越來(lái)越高。

Flutter可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開(kāi)源的。它也是構(gòu)建未來(lái)的Google Fuchsia應(yīng)用的主要方式。

Flutter組件采用現(xiàn)代響應(yīng)式框架構(gòu)建，這是從React中獲得的靈感，中心思想是用組件(widget)構(gòu)建你的UI。 組件描述了在給定其當(dāng)前配置和狀態(tài)時(shí)他們顯示的樣子。當(dāng)組件狀態(tài)改變，組件會(huì)重構(gòu)它的描述(description)，F(xiàn)lutter會(huì)對(duì)比之前的描述， 以確定底層渲染樹(shù)從當(dāng)前狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需要的最小更改。

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

3.1 下載Flutter SDK

1. 在Flutter官網(wǎng)下載最新可用的安裝包，有Beta、Dev和Master幾個(gè)版本可以選擇，一般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，雙擊運(yùn)行并啟動(dòng)flutter命令行，接下來(lái)，你就可以在Flutter命令行運(yùn)行flutter命令了。

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

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

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

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

1541217219951.png

3.3 運(yùn)行 flutter doctor

• 打開(kāi)一個(gè)新的命令提示符或PowerShell窗口并運(yùn)行以下命令以查看是否需要安裝任何依賴項(xiàng)來(lái)完成安裝：

1541224320721.png

3.4 安裝Flutter、Dart插件

3.4.1 Android Studio 安裝

Android Studio: 為Flutter提供完整的IDE體驗(yàn)

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插件

需要安裝兩個(gè)插件:

• Flutter插件： 支持Flutter開(kāi)發(fā)工作流 (運(yùn)行、調(diào)試、熱重載等).
• Dart插件： 提供代碼分析 (輸入代碼時(shí)進(jìn)行驗(yàn)證、代碼補(bǔ)全等).

要安裝這些:

1. 啟動(dòng)Android Studio.

2. 打開(kāi)插件首選項(xiàng) (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).

3. 選擇 Browse repositories…, 選擇 Flutter 插件并點(diǎn)擊 install.

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

1541225383155.png 1541225697811.png

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

1. 打開(kāi)idea新建一個(gè)工程，選擇Flutter,點(diǎn)擊Next

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

2. 點(diǎn)擊Finish

   
   1541226214925.png

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

1541238006495.png

4. 編譯運(yùn)行

1541238183265.png
本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://caipiao93.cn/18394.html