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

Flutter目標是使開發(fā)人員能夠交付在不同平臺上都感覺自然流暢的高性能應用程序。我們兼容滾動行為、排版、圖標等方面的差異。

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

它也是構(gòu)建未來的Google Fuchsia應用的主要方式。

Dart語言：

Dart是谷歌開發(fā)的計算機編程語言，它被用于web、服務器、移動應用和物聯(lián)網(wǎng)等領(lǐng)域的開發(fā)。它是寬松開源許可證（修改的BSD證書）下的開源軟件。
Dart是面向?qū)ο蟮?、類定義的、單繼承的語言。它的語法類似C語言，可以轉(zhuǎn)譯為JavaScript，支持接口(interfaces)、混入(mixins)、抽象類(abstract classes)、具體化泛型(reified generics)、可選類型(optional typing)和sound type system 。

快速開發(fā)

毫秒級的熱重載，修改后，您的應用界面會立即更新。
Flutter的熱重載可幫助您快速地進行測試、構(gòu)建UI、添加功能并更快地修復錯誤。在iOS和Android模擬器或真機上可以在亞秒內(nèi)重載，并且不會丟失狀態(tài)。

富有表現(xiàn)力和靈活的UI

Flutter內(nèi)置美麗的Material Design和Cupertino（iOS風格）widget、豐富的motion API、平滑而自然的滑動效果和平臺感知，為用戶帶來全新體驗。

現(xiàn)代的，響應式框架

使用Flutter的現(xiàn)代、響應式框架，和一系列基礎(chǔ)widget，輕松構(gòu)建您的用戶界面。使用功能強大且靈活的API（針對2D、動畫、手勢、效果等）解決艱難的UI挑戰(zhàn)。

class CounterState extends State<Counter> { int counter = 0;void increment() { // 告訴Flutter state已經(jīng)改變, Flutter會調(diào)用build()，更新顯示 setState(() { counter++; }); }Widget build(BuildContext context) { // 當 setState 被調(diào)用時，這個方法都會重新執(zhí)行. // Flutter 對此方法做了優(yōu)化，使重新執(zhí)行變的很快 // 所以你可以重新構(gòu)建任何需要更新的東西，而無需分別去修改各個widget return new Row( children: <Widget>[ new RaisedButton( onPressed: increment, child: new Text('Increment'), ), new Text('Count: $counter'), ], ); } } 

訪問本地功能和SDK

通過平臺相關(guān)的API、第三方SDK和原生代碼讓您的應用變得強大易用。 Flutter允許您復用現(xiàn)有的Java、Swift或ObjC代碼，訪問iOS和Android上的原生系統(tǒng)功能和系統(tǒng)SDK。

統(tǒng)一的應用開發(fā)體驗

Flutter擁有豐富的工具和庫，可以幫助您輕松地同時在iOS和Android系統(tǒng)中實現(xiàn)您的想法和創(chuàng)意。如果您是一位iOS或Android開發(fā)人員，則可以使用Flutter作為視圖(View)層， 并可以使用已經(jīng)用Java / Kotlin / ObjC / Swift完成的部分（Flutter支持混合開發(fā)）。

Flutter介紹視頻： https://youtu.be/fq4N0hgOWzU

Flutter框架概覽

Flutter包括一個現(xiàn)代的響應式框架、一個2D渲染引擎、現(xiàn)成的widget和開發(fā)工具。這些組件可以幫助您快速地設計、構(gòu)建、測試和調(diào)試應用程序。

一切皆為widget

Flutter Widget框架概述

Widget是Flutter應用程序用戶界面的基本構(gòu)建塊。每個Widget都是用戶界面一部分的不可變聲明。 與其他將視圖、控制器、布局和其他屬性分離的框架不同，F(xiàn)lutter具有一致的統(tǒng)一對象模型：widget。

Widget可以被定義為:

• 一個結(jié)構(gòu)元素（如按鈕或菜單）
• 一個文本樣式元素（如字體或顏色方案）
• 布局的一個方面（如填充）
• 等等…

Widget根據(jù)布局形成一個層次結(jié)構(gòu)。每個widget嵌入其中，并繼承其父項的屬性。沒有單獨的“應用程序”對象，相反，根widget扮演著這個角色。

您可以通過告訴框架使用另一個widget替換層次結(jié)構(gòu)中的widget來響應事件，例如用戶交互，替換后框架會比較新的和舊的widget，并高效地更新用戶界面。

組合 > 集成

Widget本身通常由許多更小的、單一用途widget組成，這些widget結(jié)合起來產(chǎn)生強大的效果。例如，Container是一個常用的widget， 由多個widget組成，這些widget負責布局、繪制、定位和調(diào)整大小。 您可以用各種方式組合這些以及其他簡單的widget，而不是繼承容器。

類層次結(jié)構(gòu)很淺且很寬，可以最大限度地增加可能的組合數(shù)量。

• Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.

• Stateful widgets 持有的狀態(tài)可能在widget生命周期中發(fā)生變化. 實現(xiàn)一個 stateful widget 至少需要兩個類:

  1.一個 StatefulWidget類。
  2.一個 State類。 StatefulWidget類本身是不變的，但是 State類在widget生命周期中始終存在。

還可以通過與其他widget組合來控制widget的布局。例如，要將widget居中，可以將其封裝在Center widget中。有填充、對齊、行、列和網(wǎng)格的widget。 這些布局widget沒有自己的可視化表示。相反，他們唯一的目的是控制另一個widget布局的某些方面。要理解widget以某種方式呈現(xiàn)的原因，檢查相鄰widget通常很有幫助。

分層的框架

Flutter框架是一個分層的結(jié)構(gòu)，每個層都建立在前一層之上。

這個設計的目標是幫助你用更少的代碼做更多的事情。例如，Material層是通過組合來自Widget層的基本W(wǎng)idget來構(gòu)建的， 并且Widgets層本身是通過較低級對象渲染層構(gòu)建的。

層為構(gòu)建應用程序提供了許多選項。選擇一種自定義的方法來釋放框架的全部表現(xiàn)力，或者使用構(gòu)件層中的構(gòu)建塊，或混合搭配。 您可以實現(xiàn)Flutter提供的所有現(xiàn)成的widget，或者使用Flutter團隊用于構(gòu)建框架的相同工具和技術(shù)創(chuàng)建您自己的定制widget。

構(gòu)建widget

可以通過實現(xiàn)widget的build返回widget樹（或?qū)哟谓Y(jié)構(gòu)）來定義widget的獨特特征 。 這棵樹更具體地表示了用戶界面的widget層次。例如，工具欄widget的build函數(shù)可能返回一個包含一些文本和各種按鈕的水平布局。 然后，框架遞歸地構(gòu)建widget，直到該所有widget構(gòu)建完成，然后framework將他們一起添加到樹中。

widget的構(gòu)建函數(shù)一般沒有副作用。每當它被要求構(gòu)建時，widget應該返回一個新的widget樹，無論widget以前返回的是什么。 Framework會將之前的構(gòu)建與當前構(gòu)建進行比較并確定需要對用戶界面進行哪些修改。

這種自動比較非常有效，可以實現(xiàn)高性能的交互式應用程序。而構(gòu)建函數(shù)的設計則著重于聲明widget是由什么構(gòu)成的，而不是將用戶界面從一個狀態(tài)更新到另一個狀態(tài)的(這很復雜性)，從而簡化了代碼。

處理用戶交互

如果widget需要根據(jù)用戶交互或其他因素進行更改，則該widget是有狀態(tài)的。例如，如果一個widget的計數(shù)器在用戶點擊一個按鈕時遞增，那么該計數(shù)器的值就是該widget的狀態(tài)。 當該值發(fā)生變化時，需要重新構(gòu)建widget以更新UI。

這些widget將繼承StatefulWidget（而不是State）并將它們的可變狀態(tài)存儲在State的子類中。

每當你改變一個State對象時（例如增加計數(shù)器），你必須調(diào)用setState()來通知框架，框架會再次調(diào)用State的構(gòu)建方法來更新用戶界面。

有了獨立的狀態(tài)和widget對象，其他widget可以以同樣的方式處理無狀態(tài)和有狀態(tài)的widget，而不必擔心丟失狀態(tài)。 父widget可以自由地創(chuàng)造子widget的新實例且不會失去子widget的狀態(tài)，而不是通過持有子widget來維持其狀態(tài)。 框架在適當?shù)臅r候完成查找和重用現(xiàn)有狀態(tài)對象的所有工作。

Flutter Widget 索引

使用packages

Flutter支持使用由其他開發(fā)者貢獻給Flutter和Dart生態(tài)系統(tǒng)的共享軟件包。這使您可以快速構(gòu)建應用程序，而無需從頭開始開發(fā)所有應用程序。

現(xiàn)有的軟件包支持許多使用場景，例如，網(wǎng)絡請求（http），自定義導航/路由處理（fluro）， 集成設備API（如url_launcher＆battery） 以及使用第三方平臺SDK（如 Firebase）。

搜索packages

Packages會被發(fā)布到了 Pub 包倉庫.

Flutter landing 頁面 顯示了與Flutter兼容的包。所有已發(fā)布的包都支持搜索。

將包依賴項添加到應用程序

要將包’css_colors’添加到應用中，請執(zhí)行以下操作:

1.添加依賴

• 打開 pubspec.yaml 文件，然后在dependencies下添加css_colors:

2.下載安裝

• 在 terminal中: 運行 flutter packages get
  或者
• 在 IntelliJ中: 點擊pubspec.yaml文件頂部的’Packages Get’

3.導入

• 在您的Dart代碼中添加相應的import語句.

依賴未發(fā)布的packages

即使未在Pub上發(fā)布，軟件包也可以使用。對于不用于公開發(fā)布的專用插件，或者尚未準備好發(fā)布的軟件包，可以使用其他依賴項選項：

• 路徑依賴: 一個Flutter應用可以依賴一個插件通過文件系統(tǒng)的path:依賴。路徑可以是相對的，也可以是絕對的。例如，要依賴位于應用相鄰目錄中的插件’plugin1’，使用以下語法

dependencies: plugin1: path: ../plugin1/ 

• Git依賴: 你也可以依賴存儲在Git倉庫中的包。如果軟件包位于倉庫的根目錄中，請使用以下語法：

dependencies: plugin1: git: url: git://github.com/flutter/plugin1.git 

• Git 依賴于文件夾中的包: 默認情況下，Pub假定包位于Git存儲庫的根目錄中。如果不是這種情況，可以使用path參數(shù)指定位置，例如：

dependencies:package1:git:url: git://github.com/flutter/packages.gitpath: packages/package1 

使用平臺通道編寫平臺特定的代碼

Flutter使用了一個靈活的系統(tǒng)，允許您調(diào)用特定平臺的API，無論在Android上的Java或Kotlin代碼中，還是iOS上的ObjectiveC或Swift代碼中均可用。

Flutter平臺特定的API支持不依賴于代碼生成，而是依賴于靈活的消息傳遞的方式：

• 應用的Flutter部分通過平臺通道（platform channel）將消息發(fā)送到其應用程序的所在的宿主（iOS或Android）。

• 宿主監(jiān)聽的平臺通道，并接收該消息。然后它會調(diào)用特定于該平臺的API（使用原生編程語言） - 并將響應發(fā)送回客戶端，即應用程序的Flutter部分。

消息和響應是異步傳遞的，以確保用戶界面保持響應。

示例：使用Java添加Android平臺特定的實現(xiàn)

1.添加平臺通道

在android -> java目錄中打開MainActivity.java.

接下來，在onCreate里創(chuàng)建MethodChannel并設置一個MethodCallHandler。確保使用與在Flutter客戶端使用的通道名稱相同。

import io.flutter.app.FlutterActivity; import io.flutter.plugin.common.MethodCall; import io.flutter.plugin.common.MethodChannel; import io.flutter.plugin.common.MethodChannel.MethodCallHandler; import io.flutter.plugin.common.MethodChannel.Result;public class MainActivity extends FlutterActivity { private static final String CHANNEL = "samples.flutter.io/battery";@Override public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler( new MethodCallHandler() { @Override public void onMethodCall(MethodCall call, Result result) { // TODO } }); } } 

然后，將下面的新方法添加到activity類中的，位于onCreate 方法下方：

private int getBatteryLevel() { int batteryLevel = -1; if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) { BatteryManager batteryManager = (BatteryManager) getSystemService(BATTERY_SERVICE); batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY); } else { Intent intent = new ContextWrapper(getApplicationContext()). registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED)); batteryLevel = (intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) * 100) / intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1); }return batteryLevel; } 

最后，我們完成之前添加的onMethodCall方法。我們需要處理平臺方法名為getBatteryLevel，所以我們在call參數(shù)中進行檢測是否為getBatteryLevel。 這個平臺方法的實現(xiàn)只需調(diào)用我們在前一步中編寫的Android代碼，并使用response參數(shù)返回成功和錯誤情況的響應。如果調(diào)用未知的方法，我們也會通知返回：

@Override public void onMethodCall(MethodCall call, Result result) { if (call.method.equals("getBatteryLevel")) { int batteryLevel = getBatteryLevel();if (batteryLevel != -1) { result.success(batteryLevel); } else { result.error("UNAVAILABLE", "Battery level not available.", null); } } else { result.notImplemented(); } }

2.調(diào)用平臺通道

static const platform = const MethodChannel('samples.flutter.io/battery');Future<Null> _getBatteryLevel() async { String batteryLevel; try { final int result = await platform.invokeMethod('getBatteryLevel'); batteryLevel = 'Battery level at $result % .'; } on PlatformException catch (e) { batteryLevel = "Failed to get battery level: '${e.message}'."; } } 

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