（一）什么是 Flutter
Flutter是谷歌的移動(dòng)UI框架房铭，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面暮屡。Flutter可以與現(xiàn)有的代碼一起工作撤摸。在全世界，Flutter正在被越來(lái)越多的開(kāi)發(fā)者和組織使用褒纲，并且Flutter是完全免費(fèi)准夷、開(kāi)源的。
從官方的的介紹來(lái)看可以總結(jié)成三點(diǎn)：
跨平臺(tái) 現(xiàn)在
Flutter至少可以跨 4 種平臺(tái)莺掠，甚至支持嵌入式開(kāi)發(fā)衫嵌。我們常用的有Linux、Android彻秆、IOS楔绞，甚至可以在谷歌最新的操作系統(tǒng)上Fuchsia進(jìn)行運(yùn)行，經(jīng)過(guò)第三方擴(kuò)展唇兑，甚至可以跑在MacOS和Windows上酒朵，到目前為止，Flutter算是支持平臺(tái)最多的框架了扎附，良好的跨平臺(tái)性蔫耽，直接帶來(lái)的好處就是減少開(kāi)發(fā)成本。原生用戶界面： 它是原生的留夜，讓我們的體驗(yàn)更好匙铡，性能更好。用官方的話講就是平滑而自然的滑動(dòng)效果和平臺(tái)感知碍粥，為您的用戶帶來(lái)全新的體驗(yàn)鳖眼。
開(kāi)源免費(fèi)：同
Android系統(tǒng)一樣，這些都是免費(fèi)開(kāi)源的嚼摩。
（二）主流跨平臺(tái)框架對(duì)比
ReactNative 和 Weex：執(zhí)行效率是硬傷钦讳，首頁(yè)不能用
RN已是共識(shí)，而且目前在同一Android和iOS代碼方面尚存在不足低斋。PWA：用純
Web的方式統(tǒng)一三端，很好的idea匪凡。但是需要借助Google play Service和瀏覽器支持膊畴，國(guó)外大部分Android手機(jī)和iOS的新版本都可以支持PWA，但遺憾的是病游，國(guó)內(nèi)的瀏覽器很難統(tǒng)一支持PWA唇跨，這還需要時(shí)間稠通。微信小程序：屬于微信內(nèi)的生態(tài)閉環(huán)，更適合工具類和小游戲买猖，一般都作為原生
APP的延伸入口改橘。Flutter：在渲染技術(shù)上，
Flutter選擇了自己實(shí)現(xiàn)GDI玉控，由于有更好的可控性飞主，使用了新的語(yǔ)言Dart,避免了RN的那種通過(guò)橋接器與Javascript通訊導(dǎo)致效率低下的問(wèn)題，所以在性能方面比RN更高一籌高诺；有經(jīng)驗(yàn)的開(kāi)發(fā)者可以打開(kāi)Android手機(jī)開(kāi)發(fā)者選項(xiàng)里面的顯示邊界布局碌识，發(fā)現(xiàn)Flutter的布局是一個(gè)整體。說(shuō)明Flutter的渲染沒(méi)用使用原生控件進(jìn)行渲染虱而。
| 技術(shù)類型 | UI渲染方式 | 性能 | 開(kāi)發(fā)效率 | 動(dòng)態(tài)化 | 框架代表 |
|---|---|---|---|---|---|
| H5 + 原生 | WebView 渲染 | 一般 | 高 | ?? | Cordova筏餐、Ionic |
| JavaScript + 原生渲染 | 原生控件渲染 | 好 | 高 | ?? | RN、Weex |
| 自繪UI + 原生 | 調(diào)用系統(tǒng)API渲染 | 好 | 高 | 默認(rèn)不支持 | Flutter |
（三）Flutter 的特點(diǎn)
-
快速開(kāi)發(fā)
毫秒級(jí)的熱重載牡拇，修改后魁瞪，您的應(yīng)用界面會(huì)立即更新。使用豐富的惠呼、完全可定制的widget在幾分鐘內(nèi)構(gòu)建原生界面导俘。
富有表現(xiàn)力和靈活的UI
使用Flutter內(nèi)置美麗的Material Design和Cupertino的widget、豐富的motion API罢杉、平滑而自然的滑動(dòng)效果和平臺(tái)感知趟畏，為您的用戶帶來(lái)全新體驗(yàn)。響應(yīng)式框架
使用Flutter的響應(yīng)式框架和一系列基礎(chǔ)widget滩租，可以輕松構(gòu)建您的用戶界面赋秀。使用功能強(qiáng)大且靈活的API（針對(duì)2D、動(dòng)畫(huà)律想、手勢(shì)猎莲、效果等）可以幫助開(kāi)發(fā)者解決艱難的UI挑戰(zhàn)。
class CounterState extends State<Counter> {
int counter = 0;
void increment() {
// 告訴Flutter state已經(jīng)改變, Flutter會(huì)調(diào)用build()技即，更新顯示
setState(() {
counter++;
});
}
Widget build(BuildContext context) {
// 當(dāng) setState 被調(diào)用時(shí)著洼，這個(gè)方法都會(huì)重新執(zhí)行.
// Flutter 對(duì)此方法做了優(yōu)化，使重新執(zhí)行變的很快
// 所以你可以重新構(gòu)建任何需要更新的東西而叼，而無(wú)需分別去修改各個(gè)widget
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: increment,
child: new Text('Increment'),
),
new Text('Count: $counter'),
],
);
}
}
瀏覽 widget 目錄 身笤，了解更多關(guān)于 響應(yīng)式框架.
訪問(wèn)本地功能和SDK并支持插件
Flutter可以復(fù)用Java、Swift或ObjC代碼葵陵，訪問(wèn)Android和iOS上的原生系統(tǒng)功能液荸。另外通過(guò)Flutter插件也可以訪問(wèn)原生系統(tǒng)功能，比如藍(lán)牙脱篙、相機(jī)娇钱、WiFi等等伤柄。跨平臺(tái)自繪引擎
Flutter與Hybrid App、React Native這些跨平臺(tái)技術(shù)不同文搂，Flutter既沒(méi)用使用WebView适刀，也沒(méi)有使用各個(gè)平臺(tái)的原生控件，而是本身實(shí)現(xiàn)一個(gè)統(tǒng)一接口的渲染引擎來(lái)繪制UI煤蹭，這樣做可以保證不同平臺(tái)UI的一致性笔喉。另外采用自繪引擎后，Flutter在布局過(guò)程中不需要像RN那樣要在JavaScript和Native之間通信疯兼，可以節(jié)省性能開(kāi)銷然遏。Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個(gè)2D圖形處理函數(shù)庫(kù)吧彪，包含字型待侵、坐標(biāo)轉(zhuǎn)換，以及點(diǎn)陣圖都有高效能且簡(jiǎn)潔的表現(xiàn)姨裸，Skia是跨平臺(tái)的秧倾，并提供了非常友好的API。采用Dart開(kāi)發(fā)
Flutter App采用Dart語(yǔ)言來(lái)開(kāi)發(fā)傀缩。與JavaScript相比那先，Dart在JIT（即時(shí)編譯）模式下，速度與JavaScript基本持平赡艰。但是當(dāng)Dart以AOT（運(yùn)行前編譯）模式運(yùn)行時(shí)售淡，Dart性能要高于JavaScript。
