flutter項目:如何進行web平臺和移動端平臺快速切換的技巧方法

2021-01-06 義縣遊學電子科技公司

大家好,我是您的朋友:義縣遊學電子科技。很高興您能看到這篇原創文章。今天帶來的文章主題是:flutter開發項目,如何進行web平臺和移動端平臺切換的技巧方法。

文章主題

以前有幾篇介紹flutter的文章,分別介紹了如何配置環境,如何使用基本控制項。今天我來介紹一下進行flutter開發時,使用Android studio如何進行跨平臺快速切換的問題。

首先,按照要求下載Android studio和flutter,然後參考我的這篇文章進行環境配置。配置完成後,對flutter進行web開發支持的切換。詳情請參考下我的這篇文章:推薦新技術flutter開發web頁面的環境搭建。這篇文章已經非常詳細地介紹了如何配置flutter環境變量等內容。如果您已有flutter了,就不必進行任何設置,只要您的環境能用就可以。

2. 其次,如果您的flutter目前不支持web開發,請參考下邊的文章進行web切換。如何利用flutter穩定版開發web頁。之所以這樣做的目的是為了在web平臺和移動平臺間進行切換。所以你的flutter一定要設置成既支持web端又支持移動端哦。

3. 打開Android studio,觀察您的界面。下圖是支持web開發的flutter環境模樣。

支持web開發的flutter環境模樣

如果不是這樣子的,那麼請你繼續執行第二點中文章中的命令進行切換,web支持即可。

4. 打開Android studio。如果您的flutter目前支持web,那麼按照圖中所示點擊1位置的圖標打開「安卓虛擬設備管理」窗口。然後點擊創建新的虛擬設備,也就是圖中2所示的位置按鈕。如下圖,我創建的是api28的安卓9版本的虛擬設備x86平臺。

我創建的是api28的安卓9版本的虛擬設備

5. 如果第4步中的虛擬設備創建好了,恭喜你的是你的flutter已經具備在web和移動端開發調試的功能了。下邊就是最關鍵的一點,如何在flutter的web和移動端切換。

6. web開發。選擇調試工具為chrome(web),再次點擊運行或調試按鈕即可,此時flutter就會自動打開谷歌web瀏覽器進行頁面的顯示。如下圖。

打開谷歌web瀏覽器進行頁面的顯示

7. 移動開發。點擊Android studio的1位置,打開虛擬設備管理窗口。然後點擊運行虛擬設備,這時就會打開一個手機的模擬器。如下圖。

打開一個手機的模擬器

如果你仔細觀察調試工具窗口,會出現下圖所示的移動模擬器。

會出現圖所示的移動模擬器

然後點擊調試按鈕即可進行,flutter在移動端的顯示工作。為了對比,我在web瀏覽器中顯示的頁面和移動端顯示的頁面是同一個頁面。見下圖:

flutter在移動端的顯示工作

7. 這時,你想從新進行web瀏覽器的開發怎麼做呢?就非常簡單了,直接關閉調試按鈕即可。至於模擬器你關不關都可以的,這沒有影響,只是佔用cpu資源而已。然後選擇調試工具為chrome(web),再次點擊運行或調試按鈕即可。如下圖

選擇調試工具為chrome(web),再運行

最後,以上就是flutter進行跨平臺開發的直接使用技巧,而不用來回使用命令行"flutter config --enable-web"進行切換了。非常簡單方便快捷,直接在Android stuido中就可以完成跨端開發。

分析和解決:「flutter的SDK更新後無法進行web開發」的問題

解決flutter運行報錯:flutter_tools depends的處理方法

相關焦點

  • 最新版本flutter進行web頁面的項目開發
    火爆的flutter技術已經遍地開花了.之所以會好多技術公司用,肯定它有過人之處.感興趣的朋友可以自行查詢.我這裡做的例子演示是利用flutter進行web頁開發而非移動端開發.相對於移動端手機開發,web項目開發少之又少,而且資料也不多.我這裡就好剛剛搭建成功的步驟分享給大家學習.
  • 最火移動端跨平臺方案盤點:React Native、weex、Flutter
    打包Android和IOS,肯定需要相應的平臺項目存在,在 react-native init 時創建的項目,就已經包含了 android 和 ios 的模版工程,打包完的工程會加載bundle文件,然後啟動項目,如下圖。這裡就不展開了,有興趣的可以看QQ空間移動開發團隊分享的《React Native For Android 架構初探》。
  • Flutter: 首個面向環境計算打造的 UI 平臺
    由 Dart 驅動的 Flutter 引擎通過 stateful hot reload (保持應用狀態的熱重載) 功能幫助您實現快速開發,此外,無論是在移動端、桌面端,web 端還是嵌入式設備上,Flutter 引擎都能夠提供出色的本地編譯支持,從而為您帶來快速強勁的性能表現。
  • 移動端跨平臺UI框架flutter開發環境搭建指南
    移動網際網路隨著移動網際網路的興起,移動端跨平臺編程框架層出不窮,如:react native、weex、ionic、這時google的跨平臺UI框架Flutter出場了,Flutter可以快速在iOS和Android上構建高質量的原生用戶界面。
  • 「所見即所得」深度解析Flutter web 支持的最新進展
    作者 / Mariam Hasnany, Product Manager, Flutter我們將通過這篇文章深入分享將 Flutter 引入 web 平臺的最新進展,重點介紹我們為與 web 平臺進行深度、原生集成所做的努力。
  • Flutter 1.9 穩定版發布:Flutter for web 合併至 Flutter 主倉庫...
    Flutter for web 使用基於標準的 Web 技術(HTML, CSS 和 JavaScript)進行渲染。通過 Flutter for web,可以將 Dart 編寫的 Flutter 代碼編譯成嵌入到瀏覽器並部署到任何 Web 伺服器的客戶端版本(client experience)。開發者可以使用 Flutter 的所有特性而無需瀏覽器插件。
  • ...for web 合併至 Flutter 主倉庫、支持 macOS Catalina 和 iOS 13
    Flutter for web 使用基於標準的 Web 技術(HTML, CSS 和 JavaScript)進行渲染。通過 Flutter for web,可以將 Dart 編寫的 Flutter 代碼編譯成嵌入到瀏覽器並部署到任何 Web 伺服器的客戶端版本(client experience)。開發者可以使用 Flutter 的所有特性而無需瀏覽器插件。
  • 使用 Flutter 創建 App
    該框架有一個龐大的、友好的愛好者社區,隨著 Flutter 幫助程式設計師將他們的項目帶入移動領域,這個社區還在繼續增長。本教程旨在幫助你開始使用 Flutter 進行移動開發。閱讀之後,你將了解如何快速安裝和設置框架,以便開始為智慧型手機、平板電腦和其他平臺開發。
  • Flutter 成為多平臺框架,支持移動、Web、桌面和嵌入式設備
    今天對於 Flutter 框架是一個重要的裡程碑日子,因為谷歌在其官方博客宣布,Flutter 已支持移動、Web、桌面和嵌入式設備,這意味著它正式成為了支持多平臺的輕量級 UI 框架。
  • 跨平臺Flutter接入WebView,Android和IOS兩大平臺解決方案建收藏
    今天就為大家講講Flutter中WebView的詳細使用方法,手機開始之前先簡單了解一下官方WebView所包含的API:onWebViewCreated:在WebView創建完成後調用,只會被調用一次;initialUrl:初始load的url;javascriptMode:JS執行模式(是否允許JS執行);javascriptChannels:JS和Flutter
  • 義縣遊學電子科技:flutter-web設置meta標籤便於搜索採集的方法
    義縣遊學電子科技,提供軟體編程開發,硬體,嵌入式技術,也會分享一些軟體的使用方法,希望大家多多支持.今天分享一個重磅的技術文章,對於很多用過flutter開發web的朋友一定非常熟悉了開發流程和頁面編寫.但是最終部署是不是會存在一些問題呢?
  • 編寫第一個可以運行在Android、iOS、Web平臺的Flutter應用
    目標實現一個沒有交互的靜態頁面實現一個可以展示動態數據的頁面實現一個可以點擊接收用戶輸入的頁面實現多個頁面之間的切換使用flutter實現跨平臺應用使用flutter提供的模板創建項目 flutter create my_app cd my_app實現一個沒有交互的靜態頁面使用VSCode打開上面命令行初始化出來的my_app工程。
  • Flutter插件用於在移動平臺中播放視頻支持iOS和Android建議收藏
    這篇文章介紹一下在Flutter當中播放視頻,我們用到了第三方到一個插件,目前flutter上面還沒有原生支持,可以在pub.dev上面找一些插件來解決。本百家號核心宗旨歡迎來到「技術剛剛好」百家號,本百家號是個人維護,每天至少更新一篇Flutter技術文章,實時為大家播報Flutter最新消息。
  • Flutter和桌面應用的最新進展
    您可以閱讀我們的官方文檔,詳細了解如何在 Flutter 中使用 FFI。Flutter 並沒有在框架中提供海量內容,而是通過插件和 package (無論是直接來自 Flutter 團隊還是來自更廣泛的生態系統中的貢獻者) 來實現與底層作業系統的集成。但是,隨著 Flutter 對行動裝置、Web 和桌面端的支持日益增多,為每個目標平臺開發插件也變得越來越具有挑戰性。更可能出現的情況是: 一個插件需要多個掌握各自平臺專業知識的作者通力合作,才能完成開發。
  • 最佳陣容 | Flutter Firebase 插件更新
    更新為使用聯合 (federation) 插件的方式開發,從而支持更多樣的平臺,而不僅僅是移動平臺;所有插件都將需要顯式採用新 firebase_core 版本,使得運行 flutter pub update 不會破壞代碼;
  • 在 macOS 上安裝和配置 Flutter 開發環境
    平臺配置macOS 可以允許開發 iOS、Android 和 Web(技術預覽版正式發布)三個平臺的 Flutter 應用,你可以任選一個平臺完成初始配置,以此來搭建並運行起來你的第一個 Flutter 應用。
  • 前端跨平臺方案Flutter第一個項目工程文件結構詳細解釋
    技術剛剛好經歷近幾年,移動端跨平臺開發技術層出不窮,從Facebook家的ReactNative,到阿里家WEEX,前端技術在移動端跨平臺開發中大展身手,技術剛剛好作為一名Android開發,經歷了從Reactjs到Vuejs的不斷學習。而在2018年,我們的主角變成了Flutter,這是Goolge開源的一個移動端跨平臺解決方案,可以快速開發精美的移動App。
  • Flutter框架在移動APP開發方面的優勢漸漸增長
    flutter官方公布的成功案例截圖Flutter是 由 Google發布的 的移動UI框架 使用Dart語言所編寫,可以快速在iOS和Android上構建高質量的原生用戶界面。Flutter項目的一個目錄結構這是flutter入口文件的一個編寫 可以發現 是和 java 有點類似的import 'package:flutter/material.dart';import
  • flutter開發web頁面時,谷歌瀏覽器拒絕連接的問題解決方法
    朋友們大家好,這是義縣遊學電子科技有限公司提供的文章,今天跟大家分享一個flutter開發web頁面時,運行谷歌瀏覽器無法正常顯示,頁面提示拒絕連接的問題解決方法.下圖是flutter提示的錯誤:無法連接到瀏覽器,遠程計算機拒絕連接在埠.
  • 火起來的 Flutter 開源項目大放送
    通過最近各個平臺更新的文章標題來看,就能發現 Flutter 非常火,抱著簡單瞧一瞧的心態,搭建了一下環境,準備看些已經開源的完整項目。肯定有同學要問我 Flutter 與其他跨平臺方案的對比,這裡引用下一位各種跨平臺方案都熟悉的作者的文章:移動端跨平臺開發的深度解析本文簡單跟大家聊聊入門級的知識,忙的同學收藏下就行了,也不是一定要立刻投入學習。