flutter入門與實戰教程

本文針對的是flutter的初學者，旨在讓你以一種通俗易懂的方式入門。除了顫振代碼，還將介紹語法、原理和特點等基礎知識。相信這篇文章可以幫助你學習和理解flutter。

跨平臺技術簡介

讓我們來看看當前的一些跨平臺方案。如果從前端渲染的角度來分類，大致可以分為以下幾種方案。

webview呈現

這個方案很好理解，現在很多項目都會嵌入h5頁面。它是用javascript等前端技術開發的，在客戶端用webview渲染。這個方案目前被微信小程序使用。

它具有使用成熟的前端技術進行開發、學習成本低、開發效率高、支持動態代碼發布等明顯優勢。

但是缺點也很明顯，表現體驗和原生的差距還是很大的。

本機控件呈現

由于webview的性能不夠好，所以有一種用本機控件呈現的方案。這個方案也是使用javascript開發的，但是不同的是它比較終是通過調用本機控件來呈現的。這個方案的代表是臉書的反應原生。

由于使用本機控件進行呈現，性能體驗將更接近本機。但是只是比較近，和原生還是有差距的，因為需要javascript和原生頻繁的通信，通信效率比較低。

另外，由于需要適應各個平臺的控件，有可能系統控件已經更新，但是框架本身沒有更新，導致了一些問題。換句話說，該方案受到本機控件的限制。

繪圖引擎渲染

然后就是主角。

在前端，如果完全不用原生控件，我們可以通過系統的繪圖api來繪制一個用戶界面。從這個角度來說，每個平臺都可以使用一個統一接口的繪圖引擎來繪制接口，這個引擎比較終調用系統的api來繪制。這樣它的性能可以接近原生，不受原生控件的限制，可以實現不同平臺的統一ui。

flutter就是這樣一個開發框架。

flutter 簡介

跨平臺用戶界面解決方案

flutter是google開發的跨平臺ui解決方案。換句話說，原則上只處理ui。如果涉及到平臺本身的一些功能，比如調用藍牙、攝像頭等，一般需要本機代碼才能操作。但是現在會有一些第三方庫來幫助我們解決這些問題。

繪圖引擎skia

flutter使用skia作為其繪圖引擎。skia已經被谷歌收購。目前很多google產品都是skia畫的，包括android。

android內置skia，ios沒有，所以玩ios安裝包的時候，skia會一起敲進去。結果，ios的包在打包了同樣的flutter代碼后，比android的包還大。

開發語言dart

flutter使用一種叫做dart的開發語言。dart也是google自己的，它是一種面向對象的語言，從中我們可以看到一些其他開發語言的影子。學起來不難。

當談到跨平臺解決方案時，我們可以發現其他解決方案基本上都是使用javascript作為開發語言，但是flutter為什么不用呢？就因為dart歸谷歌所有？這個問題先留著，以后再說。

搭建開發環境

這里的部分簡單拍下，具體施工流程可以在：查看

https://flutter-io.cn/docs/get-started/install

主要建筑步驟如下：

flutter sdk

地址：

https://flutter.dev/docs/development/tools/sdk/releases

由于在中國的訪問受限，這位官員為中國開發商樹立了一個鏡像：

https://flutter.dev/community/china

更新環境變量

解壓縮后，將flutterin的完整路徑添加到環境變量path中。

安裝開發工具

理論上文本編輯器都可以用來開發flutter應用，但是推薦的開發工具是android studio、intellij、vs code。因為的flutter和dart插件可以安裝在這些開發工具上，獲得更好的開發體驗。本文使用android studio進行演示。

如果打算開發ios應用，還需要安裝xcode。

安裝插件

在開發工具的插件設置中，安裝上面提到的flutter和dart插件。flutter插件用于支持flutter的運行、調試、熱重裝等功能，dart插件提供代碼輸入驗證、代碼完成等功能。

hello world!

一切從hello world開始。讓我們創建一個展示你好的項目。

在安卓工作室的歡迎頁面上選擇start a new flutter project，或者通過菜單欄中的file new new flutter project創建一個新的flutter項目。

創建的項目包含兩個文件夾，android和ios，這是標準的android和ios項目。我們的顫振代碼存儲在lib文件夾中。項目創建后，默認會帶來一個計數器的例子。我們將把main.dart的代碼改為hello world:

import " package : flutter/material . dart "；

void main=runapp(myapp)；

類myapp擴展了statelesswidget {

@覆蓋

小部件構建(buildcontext上下文){

退貨材料app(

home:腳手架(

應用程序欄：應用程序欄(標題：文本(“你好”))，

body : center(child : text(" hello world！"，style : textstyle(font size :(32))))；

}

}

啟動一個模擬器，或者連接到一個真實的機器，run運行它，你可以看到這樣一個界面：

先把具體代碼混合一下就好了，后面再說。

dart 語法

在寫flutter之前，先簡單介紹一下dart的語法。如果你有開發java或者javascript的經驗，有面向對象編程的思想，可以很快學會。

我們可以在測試文件夾下創建一個dart文件來編寫測試代碼。

變量聲明

指定類型

像java一樣，我們可以這樣聲明一個整形變量：

int num=666

定義變量

同時，我們也可以像javascript一樣用var聲明：

var num=666

但與javascript不同的是，以下代碼不會在javascript中報告錯誤，但會在dart中報告錯誤：

var num=666

void main {

num=" 666//錯誤報告

}

用于鏢

var聲明一個變量后，根據第一次賦值推斷變量的類型，之后就不能改變類型了。也就是說javascript是弱類型語言，而dart是強類型語言。

目標

如果非要這樣寫，那是可以的。將變量更改為對象，您將不會報告錯誤：

對象編號=666；

void main {

num=" 666

}

像java一樣，object是所有對象的基本類。但是在這種情況下，如果您想打印num的字符串長度，您將報告一個錯誤：

對象編號=666；

void main {

num=" 666

print(num . length)；//錯誤報告

}

因為長度屬于string，所以系統只知道num是對象，而不是string。

動態的

如果還是要這樣寫，那就可以。dart有一個唯*的關鍵字dynamic，因此如果您將對象更改為dynamic，您將不會報告錯誤：

動態數=666；

void main {

num=" 666

print(num . length)；

}

當我們運行這個文件時，我們可以看到字符串長度正確地打印在控制臺上。

動態就是動態。如果聲明了，系統會找到可用的屬性和函數來調用。但這種寫法并不安全，因為即使你拼錯了屬性名，編譯器也不會報錯，直到運行時才會報錯。

功能

動態的

在dart中，函數也可以被視為動態的，而不需要編寫返回類型。在這種情況下，函數的類型是返回類型，如果沒有返回，則是void類型。比如可以這樣：

main {

print(getnum。長度)；

}

getnum{

返回" 666 "；

}

運行后，字符串的長度可以正確打印。

用于參數傳輸

dart中的函數也是一個對象，因此它可以作為參數傳遞，例如：

main {

execute(print 666)；

}

print666 {

print(" 666 ")；

}

執行(功能有趣){

fun；

}

可選參數

在dart的函數參數中，有一個概念叫做可選參數。我們以文本控件文本為例。在源代碼中，我們可以看到文本的構造函數是這樣的：

常量文本(

this.data，{

鑰匙鑰匙，

這種風格，

this.strutstyle，

this.textalign，

這個. textdirection，

這個地方，

這個. softwrap，

這個。溢出，

this.textscalefactor，

這個. maxlines，

this.semanticslabel，

})

首先，參數中有一個數據，是要顯示的文本內容，是必選項。數據后面的一堆參數用大括號括起來。這些參數稱為可選參數，這意味著這些參數可以傳遞也可以不傳遞。

如果我們想顯示一個長文本，并且想把它限制在比較多兩行，我們可以這樣創建一個文本：

新文本(" 666666666666 "，maxlines : 2)；

可選參數廣泛用于顫振。

異步的

將來的

在dart中使用future來處理異步任務。例如，我們現在延遲打印666一秒鐘。代碼如下：

void main {

future.delayed(新持續時間(秒： 1)，{

返回" 666 "；

}).然后((數據){

//成功后執行

打印(數據)；

}).catcherror((e) {

//失敗后執行

打印("錯誤")；

}).whencomplete( {

//無論成敗都會執行

打印("完成")；

});

}

future的語法和promise很像。如果任務執行成功，將調用；如果失敗，將調用捕獲錯誤；無論成功或失敗，都將調用完成時間。

異步/等待

如果你不喜歡上面的寫法，或者想把異步轉換成同步，可以用async和wait這兩個關鍵詞來轉換。

讓我們轉換上面的代碼并編寫一個getstring方法。返回的類型是future，它將返回一個帶有延遲的字符串。在main函數之后添加async關鍵字，在getstring之前添加wait。代碼如下：

void main異步{

print(wait getstring)；

}

getstring {

返回未來。延遲(新持續時間(秒： 1)，{

返回" 666 "；

});

}

運行后，可以看到字符串正常延遲一秒后可以打印出來。這里getstring返回的類型是future，await getstring是延遲返回后返回的字符串。等待只能在異步函數中使用。

async和await實際上是一個語法糖，比較終轉換成future調用鏈的形式。

萬物皆控件

接下來，回到flutter，flutter中比較重要的概念之一就是widget。

在本機開發中，我們可以在界面上區分視圖、布局和視圖控制器。但是在flutter中，它們都屬于一個統一的widget模型。可以說，在flutter界面中，一切都是一個widget。

以前學面向對象的時候，我們都聽過一句話，什么都是對象。我將在這里應用它，在萬物皆控件.的旋舞

我對具體的控件做了簡單的分類。

根控件

類mypage擴展了statelesswidget {

@覆蓋

小部件構建(buildcontext上下文){

返回mywidget；

}

}

所有控件都屬于statefulwidget或statelesswidget.它們之間的區別在于，statefulwidget擁有state,州，而statelesswidget沒有。

statefulwidget

當一個控件是可變的，它應該用statefulwidget來構建。statefulwidget本身是不可變的，但是它持有的狀態是可變的。

狀態窗口小部件

當控件的狀態固定不變時，可以使用狀態小部件。我們之前寫的hello world使用了statelesswidget。

容器

居中(

child: mywidget

)

通常，容器類控件將某些屬性或配置應用于其子控件，例如控件的寬度、高度、背景和位置。

常用的容器控件包括容器、中心、填充等。

布局控制

列(子：小部件[

mywidget1，

mywidget2

])

布局控件可以與本機開發中的布局相比較。通常，它有一個子屬性，用于接收控件數組并為這些控件進行特定布局。

常用的布局控件有行、列、堆棧、伸縮等。

基本控制

文本(" 666 ")

基本控件是常用的控件，如文字、按鈕和圖片。

常用的基本控件有文本、文本字段、按鈕、圖像等。

功能控制

(上下文)的導航器。push(material page route(builder :(context){

return newpage；

}));

flutter中還有一種控件，不影響ui布局，但是有一些特定的功能，比如頁面跳轉、事件監控、主題定義等等。我們稱這種控制為功能控制。

常用的功能控件包括導航器、通知偵聽器、主題等。

計數器

開始寫flutter代碼。請記住，flutter項目創建后，它帶來了一個反演示。現在我們使用自己的代碼再次實現它。代碼修改如下：

import " package : flutter/material . dart "；

void main=runapp(myapp)；

類myapp擴展了statelesswidget {

@覆蓋

小部件構建(buildcontext上下文){

return material app(home : mypage)；

}

}

類mypage擴展了statefulwidget {

@覆蓋

stateflewidget create state{

返回mypagestate；

}

}

類mypagestate擴展了statemypage {

int num=0；

@覆蓋

小部件構建(buildcontext上下文){

返回腳手架(

appbar: appbar(

標題：文本("計數器")，

),

body: center(

兒童：文本(

num.tostring，

樣式：文本樣式(字體大小： 36)

)

),

浮動動作按鈕：浮動動作按鈕(

兒童：圖標，

onpressed: {

setstate( {

num

});

}));

}

}

運行后，可以看到這個界面：

每次按鈕，數字就會增加一。讓我們分析一下這段代碼，看看其中使用的一些小部件。

statefulwidget

因為頁面中的數字會隨著狀態的變化而變化，所以頁面使用statefulwidget來代替。statefulwidget不直接返回widget，而是返回state，然后返回狀態中的widget。

腳手架

腳手架是一個標準的材料設計頁面，包括標題欄、浮動按鈕、側滑菜單、底部導航欄等的配置。我們在這里使用標題欄、頁面內容主體和浮動按鈕浮動動作按鈕。

導航欄

appbar是標題欄。通過查看控件的構造方法，我們可以知道它的可配置屬性。

appbar的可選參數包括標題、

您還可以配置標題前面的內容引導、右側的操作按鈕和圖標、控制垂直高度提升等。我們只傳遞了標題，所有其他屬性都使用默認值。

中心

center是一個容器類控件，其功能是在中心顯示其子控件。

浮動動作按鈕

熟悉android開發的人應該都很熟悉這個控件，它是一個在頁面右下角有特定樣式的button。參數中的onpressed是必選項，后要傳遞一個回調函數。

根據這個例子，顫振有兩個重要的特征。

響應式 ui

單擊按鈕后，我們將num變量增加一，并使用設置狀態來通知狀態已經更改。旋舞會根據新的狀態更新ui。如果你接觸過小程序的開發，setstate類似于小程序的setdata。

在flutter中，我們不需要使用set方法來更新ui。可變控件綁定到狀態，這是flutter的響應用戶界面編程。

熱重載

android q和ios 13中，增加了黑暗模式，所以我們來玩一個黑暗主題。materialapp中有一個主題屬性。讓我們用：配置它

退貨材料app(

theme: themedata.dark，

home: mypage

);

復制代碼

在這種變化之后，我們不想run.我們可以看到，通過閃電圖標flutter hot reload，界面已經改變了：

這是flutter的熱重載.修改代碼后，通過熱重裝，可以在設備上立即看到修改結果，可以大大提高開發效率。

下面介紹一下flutter中的一些常見操作。

頁面跳轉

在flutter中，使用導航器來管理頁面跳轉。比如跳轉到一個newpage，可以這樣寫：

(上下文)的導航器。push(material page route(builder :(context){

return newpage；

}));

復制代碼

推是用來堆的，pop是用來堆的。

使用materialpageroute會模擬android上跳轉頁面的截止效果。

本地圖片

讓我們看看如何顯示本地圖片。

首先，在根目錄中創建一個新的文件夾來存儲圖片，例如圖像，并將圖片picture.png放入其中。

在根目錄下找到pubspec.yaml文件，這是flutter依賴配置文件，我們需要在這里配置剛才的圖片：

assets:

- images/picture.png

復制代碼

這樣，我們可以使用圖像控件來顯示此圖片：

image . asset(" images/picture . png ")

復制代碼

引入第三方庫

像node的npm和android的jcenter一樣，flutter也擁有一個公共倉庫pub.dev pub.dev是google的dart倉庫，在這里可以找到我們需要的包和插件。

旋舞本身沒有吐司，所以讓我們訪問一個。在pub.dev上搜索后，我決定使用fluttertoast:

根據說明，在pubspec.yaml文件中的“依賴項”下進行配置：

^3.1.0長笛獨奏：

復制代碼

android studio右上角的包獲取同步，您可以使用它：

fluttertoast . showtoast(msg : " 666666 ")；

復制代碼

ios 樣式

上面使用的所有控件都是材料設計，它們都在顫振/材料鏢包中。要使用ios風格的控件，請使用flutter/cupertino.dart包：

導入“package : flutter/cupertino . dart”；

復制代碼

ios風格的控件基本都是從cupertino開始的。讓我們替換計時器頁面中的控件：

導入“package : flutter/cupertino . dart”；

void main=runapp(myapp)；

類myapp擴展了statelesswidget {

@覆蓋

小部件構建(buildcontext上下文){

返回cupertinopp(home : mypage)；

}

}

類mypage擴展了statefulwidget {

@覆蓋

stateflewidget create state{

返回mypagestate；

}

}

類mypagestate擴展了statemypage {

int num=0；

@覆蓋

小部件構建(buildcontext上下文){

返回cupertinopagescaffold腳手架(

導航欄cupertinonavigationbar(

middle:文本("計數器")，

),

child:容器(

寬度：雙。無限，

child:列(

主軸定位：主軸定位中心，

十字軸定位：十字軸定位中心，

children: widget[

text(num.tostring，style : textstyle(font size : 36))，

cupertinobutton(

color : cupertinocolors . active blue，

child : icon(cupertinionicons . add)，

onpressed: {

setstate( {

num

});

})

],

)));

}

}

效果如下：

編譯方式

代碼到此結束。先說編譯方法。編程語言有兩種編譯方法。

準時制——運行時編譯

aot(提前)運行前編譯

這要看他們是從哪個角度比較的。jit，它的一個主要特點就是支持動態代碼發布，也就是支持熱更新。不過從性能上來說，aot會更好，因為運行時不需要編譯，運行效率會更高。

回到我們一開始留下的問題，為什么其他跨平臺解決方案都用javascript，而flutter用dart開發？javascript是用jit編譯的，不支持aot。而飛鏢同時支持jit和aot。

flutter在開發階段使用jit，讓我們使用熱過載，增加了開發效率。aot被用于包裝，以確保該應用程序的版本的性能。

熱更新？

比較后說一個大家都關心的事。flutter支持熱更新嗎？前面說過，dart支持jit，所以技術上支持。但是目前不支持。在計劃文檔中，您可以看到：

至于原因，在這里說明了。一般來說，由于政策限制以及性能和安全性的考慮，暫時不支持。

結束

就這樣結束了。因為你想在一篇文章中完成flutter的基礎知識，所以不涉及太多細節。如果想寫flutter代碼，需要深入學習。但是我相信了解之后會容易學很多。