大家好,我是您的朋友:義縣遊學電子科技。很高興您能看到這篇原創文章。今天帶來的文章主題是: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支持即可。
4. 打開Android studio。如果您的flutter目前支持web,那麼按照圖中所示點擊1位置的圖標打開「安卓虛擬設備管理」窗口。然後點擊創建新的虛擬設備,也就是圖中2所示的位置按鈕。如下圖,我創建的是api28的安卓9版本的虛擬設備x86平臺。

5. 如果第4步中的虛擬設備創建好了,恭喜你的是你的flutter已經具備在web和移動端開發調試的功能了。下邊就是最關鍵的一點,如何在flutter的web和移動端切換。
6. web開發。選擇調試工具為chrome(web),再次點擊運行或調試按鈕即可,此時flutter就會自動打開谷歌web瀏覽器進行頁面的顯示。如下圖。

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

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

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

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

最後,以上就是flutter進行跨平臺開發的直接使用技巧,而不用來回使用命令行"flutter config --enable-web"進行切換了。非常簡單方便快捷,直接在Android stuido中就可以完成跨端開發。
分析和解決:「flutter的SDK更新後無法進行web開發」的問題
解決flutter運行報錯:flutter_tools depends的處理方法