0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
电子发烧友
开通电子发烧友VIP会员 尊享10大特权
海量资料免费下载
精品直播免费看
优质内容免费畅学
课程9折专享价
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

使用Flutter和 Firebase輕松構(gòu)建Web應(yīng)用

谷歌開發(fā)者 ? 來源:Very Good Ventures ? 作者:Very Good Ventures ? 2021-06-17 14:29 ? 次閱讀

我們 (Very Good Ventures 團隊) 與 Google 合作,在今年的 Google I/O 大會上推出了照相亭互動體驗 (I/O Photo Booth)。您可以與深受喜愛的 Google 吉祥物合影: Flutter 的 Dash、Android Jetpack、Chrome 的 Dino 和 Firebase 的 Sparky,并用各種貼紙裝飾照片,包括派對帽、披薩、時髦眼鏡等。當(dāng)然,您也可以通過社交媒體下載并分享,或者用作您的個人頭像!

Flutter Dashhttps://flutter.cn/dash

我們使用 Flutter web 和 Firebase 構(gòu)建了 I/O 照相亭。因為 Flutter 現(xiàn)在支持打造 Web 應(yīng)用,我們認為這將是一個很好的方式,可以讓世界各地的與會者在今年的線上 Google I/O 大會上輕松訪問這一應(yīng)用。

Flutter web 消除了必須通過應(yīng)用商店安裝應(yīng)用的障礙,同時用戶還可以靈活選擇運行應(yīng)用的設(shè)備: 移動設(shè)備、桌面設(shè)備或平板電腦。因此,只要能使用瀏覽器,用戶便可無需下載直接使用 I/O 照相亭。

Flutter webhttps://flutter.cn/web

Firebasehttps://firebase.google.com/

盡管 I/O 照相亭旨在提供 Web 體驗,但所有代碼均采用與平臺無關(guān)的架構(gòu)編寫而成。當(dāng)相機插件等原生功能的支持在各個平臺就緒后,這套代碼即可在所有平臺 (桌面、Web 和移動設(shè)備) 通用。

使用 Flutter 構(gòu)建虛擬照相亭

構(gòu)建 Web 版 Flutter 相機插件

第一個挑戰(zhàn)即在 Web 上為 Flutter 構(gòu)建攝像頭插件。最初,我們聯(lián)系了 Baseflow 團隊,因為他們負責(zé)維護現(xiàn)有的開源 Flutter 攝像頭插件。Baseflow 致力于構(gòu)建適用于 iOS 和 Android 的一流攝像頭插件支持,我們也很樂于與其合作,使用聯(lián)合插件 (federated plugin) 方法為插件提供 Web 支持。我們盡可能符合官方插件接口,以便我們可以在準(zhǔn)備就緒時將其合并回官方插件。

Baseflowhttps://www.baseflow.com/

Flutter 攝像頭插件https://github.com/Baseflow/flutter-plugins

聯(lián)合插件https://flutter.cn/docs/development/packages-and-plugins/developing-packages#federated-plugins

我們確定了兩個對于在 Flutter 中構(gòu)建 I/O 照相亭相機體驗至關(guān)重要的 API。

初始化攝像頭: 應(yīng)用首先需要訪問您的設(shè)備攝像頭。對于桌面設(shè)備,訪問的可能是網(wǎng)絡(luò)攝像頭,而對于移動設(shè)備,我們選擇了訪問前置攝像頭。我們還提供了 1080p 的預(yù)期分辨率,以根據(jù)用戶設(shè)備類型充分提高拍攝質(zhì)量。

拍照: 我們使用了內(nèi)置的 HtmlElementView,該控件使用平臺視圖將原生 Web 元素渲染為 Flutter widget。在此項目中,我們將 VideoElement 渲染為原生 HTML 元素,這便是您在拍照前會在屏幕上看到的內(nèi)容。我們還使用了一個 CanvasElement,用于在您點擊拍照按鈕時從媒體流中捕獲圖像。

HtmlElementViewhttps://api.flutter.cn/flutter/widgets/HtmlElementView-class.html

VideoElementhttps://api.flutter.cn/flutter/dart-html/VideoElement-class.html

CanvasElementhttps://api.flutter.cn/flutter/dart-html/CanvasElement-class.html

Future《CameraImage》 takePicture() async { final videoWidth = videoElement.videoWidth; final videoHeight = videoElement.videoHeight; final canvas = html.CanvasElement( width: videoWidth, height: videoHeight, ); canvas.context2D 。.translate(videoWidth, 0) 。.scale(-1, 1) 。.drawImageScaled(videoElement, 0, 0, videoWidth, videoHeight); final blob = await canvas.toBlob(); return CameraImage( data: html.Url.createObjectUrl(blob), width: videoWidth, height: videoHeight, );}

攝像頭權(quán)限

在 Web 上完成 Flutter 攝像頭插件后,我們創(chuàng)建了一個抽象布局,以根據(jù)相機權(quán)限顯示不同的界面。例如,在等待您允許或拒絕使用瀏覽器攝像頭時,或者如果沒有可供訪問的攝像頭時,我們可以顯示一條說明性消息。

Camera( controller: _controller, placeholder: (_) =》 const SizedBox(), preview: (context, preview) =》 PhotoboothPreview( preview: preview, onSnapPressed: _onSnapPressed, ), error: (context, error) =》 PhotoboothError(error: error),)

在上面的抽象布局中,placeholder 會在應(yīng)用等待您授予攝像頭權(quán)限時返回初始界面。Preview 則會在您授予權(quán)限后返回真實的界面,并顯示攝像頭的實時視頻流。結(jié)尾的 Error 構(gòu)造語句則可以在錯誤發(fā)生時捕獲錯誤并顯示相應(yīng)的消息。

生成鏡像照片

我們的下一個挑戰(zhàn)是生成鏡像照片。如果我們照原樣使用攝像頭拍攝的照片,那么您看到的內(nèi)容將與您在照鏡子時所看到的內(nèi)容不一樣。某些設(shè)備會提供專門處理這一問題的設(shè)置選項,所以,如果您用前置攝像頭拍照,您看到的其實是照片的鏡像版本。

鏡像拍攝https://9to5mac.com/2020/07/09/iphone-mirror-selfie-photos/

在我們的第一種方法中,我們嘗試捕捉默認的攝像頭視圖,然后圍繞 y 軸對其進行 180 度翻轉(zhuǎn)。這種方法似乎有效,但后來我們遇到了一個問題,即 Flutter 偶爾會覆蓋這個翻轉(zhuǎn),導(dǎo)致視頻恢復(fù)到未鏡像的版本。

HtmlElementView 的變形被覆蓋https://github.com/flutter/flutter/issues/79519

在 Flutter 團隊的幫助下,我們將 VideoElement 放在 DivElement 中,并更新 VideoElement 以填充 DivElement 的寬度和高度,解決了這個問題。這樣一來,我們能夠為視頻元素應(yīng)用鏡像,同時因為父元素是 div,所以不會被 Flutter 覆蓋翻轉(zhuǎn)效果。如此一來,我們便獲得了所需的鏡像攝像頭視圖!

DivElementhttps://api.flutter.cn/flutter/dart-html/DivElement-class.html

保持寬高比

在大屏幕上保持 4:3 寬高比,以及在小屏幕上保持 3:4 寬高比,這個操作起來比看起來更難!保持寬高比非常重要,既要符合 Web 應(yīng)用的整體設(shè)計,又要確保在社交媒體上分享照片時,令其中的像素呈現(xiàn)出清晰的本色效果。這是一項具有挑戰(zhàn)性的任務(wù),因為不同設(shè)備上內(nèi)置攝像頭的寬高比差異很大。

為了強制保持寬高比,應(yīng)用首先使用 JavaScript getUserMedia API 從設(shè)備攝像頭請求可能的最大分辨率。隨后,我們將此 API 傳遞到 VideoElement 流中,這便是您在攝像頭視圖中看到的內(nèi)容 (當(dāng)然是已鏡像的版本)。

我們還應(yīng)用了 object-fit CSS 屬性來確保視頻元素能蓋住其父級容器。我們使用 Flutter 自帶的 AspectRatio widget 來設(shè)置寬高比。因此,攝像頭不會對顯示的寬高比做出任何假設(shè);它始終返回支持的最大分辨率,然后遵守 Flutter 提供的約束條件 (在本例中為 4:3 或 3:4)。

getUserMediahttps://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

object-fithttps://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

final orientation = MediaQuery.of(context).orientation;final aspectRatio = orientation == Orientation.portrait ? PhotoboothAspectRatio.portrait : PhotoboothAspectRatio.landscape;return Scaffold( body: _PhotoboothBackground( aspectRatio: aspectRatio, child: Camera( controller: _controller, placeholder: (_) =》 const SizedBox(), preview: (context, preview) =》 PhotoboothPreview( preview: preview, onSnapPressed: () =》 _onSnapPressed( aspectRatio: aspectRatio, ), ), error: (context, error) =》 PhotoboothError(error: error), ), ),);

通過拖放添加貼紙

I/O 照相亭的一大重要體驗在于與您最喜歡的 Google 吉祥物合影并添加道具。您能夠在照片中拖放吉祥物和道具,以及調(diào)整大小和旋轉(zhuǎn),直到獲得您喜歡的圖像。您也會發(fā)現(xiàn),在將吉祥物添加到屏幕上時,您可以拖動它們并調(diào)整其大小。吉祥物們還是有動畫效果的——這種效果由 sprite sheet 來實現(xiàn)。

for (final character in state.characters) DraggableResizable( canTransform: character.id == state.selectedAssetId, onUpdate: (update) { context.read《PhotoboothBloc》().add( PhotoCharacterDragged( character: character, update: update, ), ); }, child: _AnimatedCharacter(name: character.asset.name), ),

為調(diào)整對象的大小,我們創(chuàng)建了可拖動、可調(diào)整大小且可以容納其他 Flutter widget 的 widget,在本例中,即為吉祥物和道具。該 widget 會使用 LayoutBuilder,根據(jù)窗口的約束條件來處理 widget 的縮放。

在內(nèi)部,我們使用 GestureDetector 以掛接到 onScaleStart、onScaleUpdate 和 onScaleEnd 事件。這些回調(diào)提供了必要的手勢詳細信息,以反映用戶對吉祥物和道具的操作。

LayoutBuilderhttps://api.flutter.cn/flutter/widgets/LayoutBuilder-class.html

GestureDetectorhttps://api.flutter.cn/flutter/widgets/GestureDetector-class.html

通過多個 GestureDetector 回饋的數(shù)據(jù),Transform widget 和 4D 矩陣變換即可根據(jù)用戶所做的各種手勢處理縮放,以及旋轉(zhuǎn)吉祥物和道具。

Transformhttps://api.flutter.cn/flutter/widgets/Transform-class.html

Transform( alignment: Alignment.center, transform: Matrix4.identity() 。.scale(scale) 。.rotateZ(angle), child: _DraggablePoint(。。。),)

最后,我們創(chuàng)建了單獨的 package 來確定您的設(shè)備是否支持觸摸輸入。可拖動、可調(diào)整大小的 widget 會根據(jù)觸摸功能做出相應(yīng)的調(diào)整。

在具有觸摸輸入功能的設(shè)備上,您并不能看到調(diào)整大小的錨點和旋轉(zhuǎn)圖標(biāo),因為您可以通過雙指張合和平移手勢來直接操縱圖像;而在不支持觸摸輸入的設(shè)備 (例如您的桌面設(shè)備) 上,我們則添加了錨點和旋轉(zhuǎn)圖標(biāo),以適應(yīng)單擊和拖動操作。

針對 Web 優(yōu)化 Flutter

使用 Flutter 針對 Web 進行開發(fā)

這是我們使用 Flutter 構(gòu)建的首批純 Web 項目之一,其與移動應(yīng)用具有不同的特征。

我們需要確保該應(yīng)用對任何設(shè)備上的任何瀏覽器都具有響應(yīng)性和自適應(yīng)性。也就是說,我們必須確保 I/O 照相亭可以根據(jù)瀏覽器大小進行縮放,并且能夠處理移動設(shè)備和 Web 端的輸入。我們通過以下幾種方式做到了這一點:

響應(yīng)式調(diào)整大?。?用戶能夠隨意調(diào)整瀏覽器的大小,并且界面能做出響應(yīng)。如果您的瀏覽器窗口為縱向,則相機會從 4:3 的橫向視圖翻轉(zhuǎn)為 3:4 的縱向視圖。

響應(yīng)式設(shè)計: 針對桌面瀏覽器,我們設(shè)計為在右側(cè)顯示 Dash、Android Jetpack、Dino 和 Sparky,而對于移動設(shè)備,這些要素則會顯示在頂部。我們針對桌面設(shè)備,在攝像頭右側(cè)設(shè)計使用了抽屜式導(dǎo)航欄,而對于移動設(shè)備,則使用了 BottomSheet 類。

自適應(yīng)輸入: 如果您使用桌面設(shè)備訪問 I/O 照相亭,則鼠標(biāo)點擊操作將被視為輸入,如果您使用的是平板電腦或手機,則使用觸摸輸入。在調(diào)整貼紙大小并將其放置在照片中時,這一點尤其重要。移動設(shè)備支持雙指張合和平移手勢,桌面設(shè)備支持點擊和拖動操作。

創(chuàng)建響應(yīng)式和自適應(yīng)的應(yīng)用https://flutter.cn/docs/development/ui/layout/adaptive-responsive

可擴展架構(gòu)

我們還為此應(yīng)用構(gòu)建了可擴展的移動應(yīng)用。我們的 I/O 照相亭在創(chuàng)建之初就具有穩(wěn)固的基礎(chǔ),包括良好的空安全性、國際化,以及從第一次提交開始就做到的 100% 單元和 widget 測試覆蓋率。

我們使用 flutter_bloc 進行狀態(tài)管理,因為它支持我們輕松測試業(yè)務(wù)邏輯,并觀察應(yīng)用中的所有狀態(tài)變化。這對于生成開發(fā)者日志和確??勺匪菪蕴貏e有用,因為我們可以準(zhǔn)確地觀察到從一個狀態(tài)到另一個狀態(tài)的變化,并更快地隔離問題。

flutter_blochttps://pub.flutter-io.cn/packages/flutter_bloc

我們還實現(xiàn)了由功能驅(qū)動的單一代碼庫結(jié)構(gòu)。例如,貼紙、分享和實時相機預(yù)覽,均在各自的文件夾中得到實現(xiàn),其中每個文件夾包含其各自的界面組件和業(yè)務(wù)邏輯。這些功能也會用到外部依賴,例如位于 package 子目錄中的相機插件。

利用這種架構(gòu),我們的團隊能夠在互不干擾的情況下并行處理多個功能,最大限度地減少合并沖突,并有效地重用代碼。例如,界面組件庫是名為 photobooth_ui 的單獨 package,相機插件也是單獨的。

photobooth_uihttps://github.com/flutter/photobooth/tree/main/packages/photobooth_ui

通過將組件分成獨立的 package,我們可以提取未與此特定項目綁定的各個組件,并將其開源。與 Material 和 Cupertino 組件庫類似,我們甚至可以將界面組件庫 package 做開源處理,以供 Flutter 社區(qū)使用。

Materialhttps://flutter.cn/docs/development/ui/widgets/material

Cupertinohttps://flutter.cn/docs/development/ui/widgets/cupertino

Firebase + Flutter = 完美組合

Firebase Auth、存儲、托管等照相亭利用 Firebase 生態(tài)系統(tǒng)進行各種后端集成。firebase_auth package 支持用戶在應(yīng)用啟動后立即匿名登錄。每個會話都使用 Firebase Auth 創(chuàng)建具有唯一 ID 的匿名用戶。

firebase_authhttps://pub.flutter-io.cn/packages/firebase_auth

當(dāng)您來到共享頁面時,此設(shè)置即會開始發(fā)揮作用。您可以下載照片以保存為個人頭像,也可以直接將其分享到社交媒體。如果您下載照片,則該照片將存儲在您的本地設(shè)備上。如果您分享照片,我們會使用 firebase_storage package 將照片存儲在 Firebase 中,以便稍后檢索并生成帖子通過社交媒體發(fā)布。

firebase_storagehttps://pub.flutter-io.cn/packages/firebase_storage

我們在 Firebase 的存儲分區(qū)上定義了 Firebase 安全規(guī)則,確保照片在創(chuàng)建后不可變。這可以防止其他用戶修改或刪除存儲分區(qū)中的照片。此外,我們使用 Google Cloud 提供的對象生命周期管理,定義了一個刪除 30 天前所有對象的規(guī)則,但您可以按照應(yīng)用中列出的說明請求盡快刪除您的照片。

Firebase 安全規(guī)則https://firebase.google.cn/docs/rules

對象生命周期管理https://cloud.google.com/storage/docs/lifecycle

此應(yīng)用還使用 Firebase Hosting 快速安全地進行托管。我們可以借助 action-hosting-deploy GitHub Action,根據(jù)目標(biāo)分支,將應(yīng)用自動部署到 Firebase Hosting。當(dāng)我們將變更合并到主分支時,該操作會觸發(fā)一個工作流,用于構(gòu)建應(yīng)用的特定開發(fā)版本,并將其部署到 Firebase Hosting。同樣,當(dāng)我們將變更合并到發(fā)布分支時,該操作也會觸發(fā)部署生產(chǎn)版本。通過結(jié)合使用 GitHub Action 與 Firebase Hosting,我們的團隊能夠快速迭代,并始終得到最新版本的預(yù)覽。

Firebase Hostinghttps://firebase.google.cn/docs/hosting

action-hosting-deployhttps://github.com/FirebaseExtended/action-hosting-deploy

最后,我們使用 Firebase 性能監(jiān)測來監(jiān)控主要的 Web 性能指標(biāo):

https://firebase.google.cn/products/performance

使用 Cloud Functions 進行社交

在生成您的社交帖子之前,我們首先會確保照片內(nèi)容是像素級完美的。最終圖像包含漂亮的邊框,以呈現(xiàn) I/O 照相亭特色,并按 4:3 或 3:4 的寬高比進行裁剪,以便在社交帖子上呈現(xiàn)出色的效果。

我們使用 OffscreenCanvas API 或 CanvasElement 來合成原始照片、吉祥物和道具的圖層,并生成您可以下載的單個圖像。這個處理步驟由 image_compositor package 負責(zé)執(zhí)行。

OffscreenCanvashttps://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

CanvasElementhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas

image_compositorhttps://github.com/flutter/photobooth/tree/main/packages/image_compositor

然后,我們利用 Firebase 強大的 Cloud Functions,來將照片分享到社交媒體。當(dāng)您點擊分享按鈕時,系統(tǒng)會帶您前往新標(biāo)簽頁,并在所選的社交平臺上自動生成待發(fā)布的帖子。

該帖子還包含一個鏈接,連接到我們編寫的 Cloud Functions。瀏覽器在分析網(wǎng)址時,會檢測 Cloud Functions 生成的動態(tài)元數(shù)據(jù),并據(jù)此在您的社交帖子中顯示照片的精美預(yù)覽,以及一個指向分享頁面的鏈接,您的粉絲們可以在該頁面上查看照片,并導(dǎo)航回 I/O 照相亭應(yīng)用,以獲取他們自己的照片。

Cloud Functionshttps://firebase.google.cn/docs/functions

function renderSharePage(imageFileName: string, baseUrl: string): string { const context = Object.assign({}, BaseHTMLContext, { appUrl: baseUrl, shareUrl: `${baseUrl}/share/${imageFileName}`, shareImageUrl: bucketPathForFile(`${UPLOAD_PATH}/${imageFileName}`), }); return renderTemplate(shareTmpl, context);}

有關(guān)如何在 Flutter 項目中使用 Firebase 的更多信息,請查看此 Codelab:

https://firebase.google.cn/codelabs/firebase-get-to-know-flutter#0

最終成果

本項目詳細地示范了如何針對 Web 來構(gòu)建應(yīng)用的方法。令我們感到驚喜的是,與使用 Flutter 構(gòu)建移動應(yīng)用的體驗相比,這個 Web 應(yīng)用的構(gòu)建工作流與之非常相似。我們必須考慮窗口大小、自適應(yīng)、觸摸與鼠標(biāo)輸入、圖像加載時間、瀏覽器兼容性等元素,以及在構(gòu)建 Web 應(yīng)用時所必需考慮的其他所有因素。

但是,我們?nèi)匀豢梢允褂孟嗤哪J?、架?gòu)和編碼標(biāo)準(zhǔn)來編寫 Flutter 代碼,這讓我們在構(gòu)建 Web 應(yīng)用時感到非常自在。Flutter package 提供的工具和不斷發(fā)展的生態(tài)系統(tǒng),包括 Firebase 工具套件,幫助我們實現(xiàn)了 I/O 照相亭。

編輯:jq

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • Google
    +關(guān)注

    關(guān)注

    5

    文章

    1788

    瀏覽量

    58689
  • Web
    Web
    +關(guān)注

    關(guān)注

    2

    文章

    1283

    瀏覽量

    70852
  • 代碼
    +關(guān)注

    關(guān)注

    30

    文章

    4889

    瀏覽量

    70288
  • 4D
    4D
    +關(guān)注

    關(guān)注

    0

    文章

    64

    瀏覽量

    11888
  • DASH
    +關(guān)注

    關(guān)注

    0

    文章

    8

    瀏覽量

    2775

原文標(biāo)題:I/O 照相亭 | Flutter + Firebase = 輕松構(gòu)建 Web 應(yīng)用

文章出處:【微信號:Google_Developers,微信公眾號:谷歌開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。

收藏 0人收藏

    評論

    相關(guān)推薦
    熱點推薦

    使用 Flutter SDK 3.27.4構(gòu)建HarmonyOS應(yīng)用

    使用 Flutter SDK 3.27.4構(gòu)建HarmonyOS應(yīng)用 下載鴻蒙版flutter(3.27.4版本) 項目地址:https://gitcode.com/openharmony-sig
    的頭像 發(fā)表于 06-11 09:15 ?44次閱讀

    Flutter on Raspberry Pi:從入門到精通的完整指南!

    在GoogleIO會議上展示了一個在樹莓派上運行Flutter的可能性。然而,該會議并未提供全面的、一步一步的指南供用戶參考。本文旨在填補這一空白,提供詳細的操作步驟,幫助你在樹莓派上運行
    的頭像 發(fā)表于 06-06 15:37 ?527次閱讀
    <b class='flag-5'>Flutter</b> on Raspberry Pi:從入門到精通的完整指南!

    鴻蒙Flutter實戰(zhàn):14-現(xiàn)有Flutter 項目支持鴻蒙 II

    ohos-3.22 在 build 時,有的 har 包可能確實,建議保持 ohos-Flutter 版本最新,如果還是不行,可以考慮手動復(fù)制 har 包(使用 3.7 構(gòu)建出來) 如何判斷三方庫是否需要鴻蒙化
    發(fā)表于 12-26 14:59

    鴻蒙Flutter實戰(zhàn):12-使用模擬器開發(fā)調(diào)試

    前提 開發(fā)電腦需為M系列芯片 (ARM架構(gòu)) 的 Mac 電腦 目前 Flutter 鴻蒙開發(fā),無法使用 X86 架構(gòu)的模擬器,只能使用 ARM 架構(gòu)的模擬器** 創(chuàng)建項目 等開發(fā)環(huán)境搭建
    發(fā)表于 11-10 13:13

    鴻蒙Flutter實戰(zhàn):11-使用 Flutter SDK 3.22.0

    # 使用 Flutter SDK 3.22.0 ## SDK 安裝 參考[鴻蒙Flutter實戰(zhàn):01-搭建開發(fā)環(huán)境]文章的說明,首先安裝 Flutter SDK 3.22.0。 目前鴻蒙化
    發(fā)表于 11-01 15:03

    鴻蒙Flutter實戰(zhàn):10-常見問題集合

    # 鴻蒙Flutter實戰(zhàn):10-常見問題集合 ## 1. 學(xué)習(xí)路徑應(yīng)該是怎樣的,需要掌握哪些技術(shù)才具備鴻蒙 Flutter 開發(fā)能力 1.1 學(xué)習(xí)和掌握 Flutter 開發(fā)技術(shù),這塊需要
    發(fā)表于 10-23 17:05

    鴻蒙Flutter實戰(zhàn):09-現(xiàn)有Flutter項目支持鴻蒙

    # 鴻蒙Flutter實戰(zhàn):現(xiàn)有Flutter項目支持鴻蒙 ## 背景 原來使用Flutter開發(fā)的項目,需要適配鴻蒙。 ## 環(huán)境搭建 見文章[鴻蒙Flutter適配指南],
    發(fā)表于 10-23 16:36

    鴻蒙Flutter實戰(zhàn):08-如何調(diào)試代碼

    # 鴻蒙Flutter實戰(zhàn):如何調(diào)試代碼 ## 1.環(huán)境搭建 參考文章[鴻蒙Flutter實戰(zhàn):01-搭建開發(fā)環(huán)境](https://gitee.com/zacks
    發(fā)表于 10-23 16:29

    鴻蒙Flutter實戰(zhàn):07混合開發(fā)

    # 鴻蒙Flutter實戰(zhàn):混合開發(fā) 鴻蒙Flutter混合開發(fā)主要有兩種形式。 ## 1.基于har 將flutter module打包成har包,在原生鴻蒙項目中,以har包的方式引入
    發(fā)表于 10-23 16:00

    鴻蒙Flutter實戰(zhàn):06-使用ArkTs開發(fā)Flutter鴻蒙插件

    # 使用 ArkTs 開發(fā) Flutter 鴻蒙平臺插件 本文講述如何開發(fā)一個 Flutter 鴻蒙插件,如何實現(xiàn) Flutter 與鴻蒙的混合開發(fā),以及雙端消息通信。 ## Flutte
    發(fā)表于 10-22 21:56

    鴻蒙Flutter實戰(zhàn):05-使用第三方插件

    # 鴻蒙Flutter 實戰(zhàn):使用第三方插件 在鴻蒙Flutter開發(fā)中,如果涉及到使用原生功能,就要使用插件。使用插件有兩種方式,一種是自己編寫原生ArkTS代碼,在Dart側(cè)調(diào)用。另外一種
    發(fā)表于 10-22 21:54

    鴻蒙Flutter實戰(zhàn):04-如何使用DevTools調(diào)試Webview

    # 鴻蒙 Flutter 如何使用 DevTools 調(diào)試 Webview 在《鴻蒙 Flutter 開發(fā)中集成 Webview》,介紹了如果在 Flutter 中集成 Webview. 本文
    發(fā)表于 10-22 21:53

    鴻蒙Flutter實戰(zhàn):03-鴻蒙Flutter開發(fā)中集成Webview

    # 鴻蒙 Flutter 開發(fā)中集成 Webview ## 主要有兩種方案 ### 使用第三方庫 如 使用`flutter_inappwebview`插件,在 pubspec.lock 文件中
    發(fā)表于 10-22 21:51

    鴻蒙Flutter實戰(zhàn):02-Windows環(huán)境搭建踩坑指南

    環(huán)境搭建 1. 下載Flutter SDK,配置環(huán)境變量 鴻蒙 Flutter SDK 需要在 Gitee 下載。目前建議下載 dev 分支代碼。 需要配置以下用戶變量 注意鴻蒙開發(fā)需要安裝Java
    發(fā)表于 10-22 15:05

    鴻蒙Flutter實戰(zhàn):01-搭建開發(fā)環(huán)境

    ; 如果要適配ios,需要安裝Xcode Mac 安裝(推薦) 環(huán)境變量配置 # Flutter Mirror export PUB_HOSTED_URL=https
    發(fā)表于 10-21 19:35

    電子發(fā)燒友

    中國電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會員交流學(xué)習(xí)
    • 獲取您個性化的科技前沿技術(shù)信息
    • 參加活動獲取豐厚的禮品