Flutter 2在3月份釋出以後，開放了移動端、Web端、桌面端的釋出能力，之前一直使用Flutter開發移動應用，沒有敢用Flutter做Web專案，近期有時間自己調研了一下，也遇到了一些問題，在這裡記錄一下。 建立一個Flutter專案做Demo，整合了一些外掛：專案地址
目前遇到的問題（不斷更新中...）
1、跨域
2、多裝置除錯
一、跨域問題
主要使用了cached_network_image來載入網路上的圖片來展現跨域問題，直接用Image.network也是可以的，在網路上隨便找了一張圖片via.placeholder.com/350x150
PS: 一般看一個外掛支援那些平臺，可以在pub.dev上看，cached_network_image顯示並不支援web，但是用瀏覽器執行起來後，也是可以呼叫相簿和拍照的。
1、本人習慣用VSCode開發，VSCode執行Flutter Web專案首先選擇裝置為Chrome
2、然後選擇Debug，點選三角符號執行
3、不出意外，執行成功後，Chrome就展現出專案了，這裡首頁用了一個第三方框架：gesture_password_widget，因為也想看看這個手勢密碼在Web上的表現
4、根據上面的提示滑動正確的手勢順序，就進入了功能列表頁面
5、點選Cached Network Image Demo，進入測試載入圖片頁面，發現圖片載入失敗，並且控制檯報錯了
6、很明顯，這邊請求的圖片伺服器和頁面執行的地址不通，產生了跨域問題
7、解決方法在這篇文章裡說的很詳細：Flutter Web 跨域問題解決方案，裡面推薦了多種方法，我這邊用了第三種，類似啟動一個代理服務的方式，在Demo專案裡的lib/server/cors.dart檔案中配置目標伺服器地址和代理地址及埠，然後通過終端執行該檔案，啟動一個代理服務。
dart xxx/xxx/xxx/cors.dart
複製程式碼8、這裡我配的代理服務是localhost:4040，現在開啟localhost:4040/350x150，圖片載入成功
9、然後把Demo專案里載入圖片的地址改一下
// imageUrl: "http://via.placeholder.com/350x150",
imageUrl: "http://localhost:4040/350x150",
複製程式碼10、可以看到，圖片已經可以載入出來了
二、除錯問題
接著上面，跨域問題解決後，我想在手機上通過瀏覽器測一下，目前專案啟動在電腦上的地址是http://localhost:52754/#/，確認電腦和手機處於同一個網段後，我開啟手機Safari瀏覽器，然後將地址的localhost修改為電腦的ip，發現居然無法開啟
嘗試了不同的啟動方式，如
flutter run -d chrome
複製程式碼也不起作用
在網上搜尋的時候發現有人諮詢過類似問題：flutter - 從真實的移動瀏覽器訪問flutter localhost，裡面的回答解釋了為什麼Flutter執行的Web專案不能充當伺服器被訪問，然後也給出瞭解決方法，大致意思就是讓你先編譯出來Web專案，然後在本地部署一下，就可以通過其他裝置訪問了。
這個方法雖然可以解決，但是不方便一邊開發一邊除錯，於是再找解決方案，發現有人提供了這樣一條命令
flutter run -d chrome --web-hostname xxx.xxx.xxx.xxx --web-port xxxx
複製程式碼嘗試了一下，通過終端將電腦的ip地址輸進去，再加個埠號，執行起來後，發現可以通過外部裝置訪問了
接著我們修改一下程式碼內容，發現頁面沒有自動重新整理，在控制檯中看到如下提示，意思是改動過後，需要在終端輸入命令r來重新整理
PS：這樣會有一個新問題，就是上面跨域問題的配置，需要將localhost換成相同的ip地址，這樣才能在外部裝置也訪問到配置的外部伺服器地址
暫時先寫到這裡，後面碰到新的問題再來更新。