Flutter是谷歌公司推出的跨終端的開發(fā)框架,支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布,目前的最新版本是1.5,它采用的開發(fā)語言是Dart,Dart也是谷歌開發(fā)的計算機編程語言,語法類似C,是編譯型語言:
創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的平川網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
hello world例子,打印字符串“Hello World!”:
1、沒有橋接層
React Native、Weex等技術(shù)都是跨終端的框架,然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的:
React Native、Weex等技術(shù)多了一個橋接層,所以界面渲染會慢一些,由于UI渲染非常頻繁,想要不卡頓,基本上比較難,性能和用戶體驗跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢所在:
Dart可以被編譯成不同平臺的本地代碼,讓Flutter不通過橋接層直接跟平臺通信,自然性能會快一些。
2、編譯執(zhí)行
JavaScript是解釋執(zhí)行的,Dart是編譯執(zhí)行的,性能誰好一目了然。
3、Flutter Engine虛擬機
Flutter是依靠Flutter Engine虛擬機在iOS和Android上運行的,F(xiàn)lutter Engine使用C/C++編寫,開發(fā)人員通過Flutter框架直接和API在內(nèi)部進行交互,所以具有輸入低延遲和UI渲染高幀速率的特點。除了這特點之外,F(xiàn)lutter還提供了自己的小部件,F(xiàn)lutter小部件是使用從React獲取靈感的現(xiàn)代框架構(gòu)建的。 中心思想是您使用小部件構(gòu)建UI。
窗口小部件根據(jù)其當前配置和狀態(tài)描述了它們的視圖。 當窗口小部件的狀態(tài)發(fā)生更改時,窗口小部件會重建其描述,框架將根據(jù)前面的描述進行區(qū)分,以確定底層呈現(xiàn)樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改??梢灾苯釉贠S平臺提供的畫布上進行描繪,也就是一些核心類庫直接放到虛擬機里面,調(diào)用起來更快。
從它的系統(tǒng)結(jié)構(gòu)可以看出,類似安卓的ART(Android Run Time)虛擬機,同樣采用AOT(Ahead of TIme)技術(shù),會在APP安裝時就編譯成機器語言,不再解釋執(zhí)行,從而優(yōu)化了APP運行的性能。
4、自帶渲染引擎
Flutter使用谷歌自己的Skia渲染引擎,而Android系統(tǒng)自帶Skia引擎,iOS平臺上Flutter也會把Skia引擎打包到APP中,從而實現(xiàn)了高效渲染。而React Native通過橋接層訪問原生UI,操作頻繁就容易出性能問題。
綜合所述,F(xiàn)lutter 是性能最接近原生代碼 的一種開發(fā)框架,未來也會是構(gòu)建谷歌Fuchsia應(yīng)用的主要方式,前途不可限量,唯一的問題就是需要學習一門新的語言:Dart,而有Java或者C#語言基礎(chǔ)的程序員會比較容易學習。
文章轉(zhuǎn)自:
用Android Stduio創(chuàng)建Flutter項目的時候,會出現(xiàn)各種問題,踩了一個又一個,最后編譯的時候可能會出現(xiàn)一直顯示Running Gradle task 'assembleDebug'然后就不動了,或者會顯示Could not resolve io.flutter等問題,歸根結(jié)底是網(wǎng)絡(luò)無法訪問到Google服務(wù)引起的,兩種解決方案:
1.具有比較良好的訪問谷歌的網(wǎng)絡(luò)環(huán)境
2.修改鏡像源為國內(nèi)的:
找到Flutte SDK目錄下的Flutter打包配置文件flutter.gradle
路徑為flutter\packages\flutter_tools\gradle\flutter.gradle
第一處配置:
buildscript {
repositories {
//注釋
// google()
// jcenter()
//添加
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
}
}
第二處配置:
class FlutterPlugin implements PluginProject {
//注釋
// private static final String MAVEN_REPO = " ";
//添加這行
private static final String MAVEN_REPO = " ";
第三處配置:
void addFlutterDependencies(buildType) {
String flutterBuildMode = buildModeFor(buildType)
if (!supportsBuildMode(flutterBuildMode)) {
return
}
String repository = useLocalEngine()
? project.property('local-engine-repo')
: MAVEN_REPO
最后一處,項目中的配置,修改Flutter項目下的android下的build.gradle:
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
allprojects {
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
修改完成后,再build,就可以正常構(gòu)建了?。?!
1.webview_flutter
2.flutter_inappwebview
3.flutter_webview_plugin
筆者最近發(fā)現(xiàn)webview_flutter在Android端嵌套帶有較長的Webview頁面時偶歐會存在卡頓問題表現(xiàn)為加速向下滑動到頁面底部,然后從底部慢慢像上滑就不起作用了,體驗很不好,經(jīng)過一天的排查和實驗發(fā)現(xiàn)是webview_flutter插件自己的問題,用原生嵌套WebView并沒有問題,后來改成flutter_webview_plugin問題可以解決,但是flutter_webview_plugin插件并不是基于flutter渲染的并不能在嵌套webview的頁面自定義flutter樣式層,后來發(fā)現(xiàn)使用flutter_inappwebview插件能夠完美解決問題。推薦你們用flutter_inappwebview。
In iOS 14+,debug mode Flutter apps can only be launched from Flutter tooling, IDEs with Flutter plugins or from Xcode.
Alternatively,build in profile or release modes to enable launching from the home screen.
在iOS 14+,調(diào)試模式Flutter應(yīng)用程序只能從Flutter工具,帶有Flutter插件的ide或Xcode啟動。
或者,構(gòu)建概要文件或發(fā)布模式,以支持從主屏幕啟動。
$ cd 項目目錄
$ flutter run --release