2020/8/10

flutter web app , development with VSCode

現在好像可以在 VSCode 中開發 flutter 應用了。
(不確定是不是,因為測試的機器還是都有安裝 android-sdk 跟 android-studio)

flutter sdk 採用 git clone 方式安裝
然後 follow flutter 文件:Building a web application with Flutter..

大概就是用 flutter command 切換到 beta branch:
 flutter channel beta
 flutter upgrade
 flutter config --enable-web
然後 run flutter devices 測試看看,有沒有出現 browser...
$ flutter devices
2 connected device:

Web Server • web-server • web-javascript • Flutter Tools
Chrome     • chrome     • web-javascript • Google Chrome 81.0.4044.129
實際上,如果 VSCode 要 support 的話,要再run 一次 flutter doctor,這好像會 update VSCode 的 flutter/dart plugin 的內容。

一些文章 說,在 VSCode 的 command palette 中會出現Flutter: New Web Project
但是實際上,,新版flutter 已經把這個 command 拿掉了。

用普通的Flutter: New Project 就可以了。

因為Android, iOS, Web 的 project 和 source 都一樣呀。

只有在 debug, run 的時候,可以選擇你要在Android, iOS 還是 Web Browser 上 run



在VSCode, 下面,device 的地方,按下去,就會出現可以 run 這格 app 的 device...
-- 如果沒有出現 Web 的話,可能是因為flutter update 之後沒有 run flutter doctor,所以VSCode 對應的 plugin 沒update..



更新:

的確可以不安裝 android studio 跟 android sdk。
但是這樣只能開發 web application。

因為 flutter beta channel 開啟了 web application 功能。
所以才能這樣做。
的確,flutter docktor 會有Error。
但是沒關係
C:\Users\check>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.20.2, on Microsoft Windows [Version 10.0.19041.450], locale zh-TW)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[√] Chrome - develop for the web
[!] Android Studio (not installed)
[√] VS Code (version 1.48.0)
[√] Connected device (3 available)

! Doctor found issues in 2 categories.

C:\Users\check>flutter devices
3 connected devices:

Web Server (web) • web-server • web-javascript • Flutter Tools
Chrome (web)     • chrome     • web-javascript • Google Chrome 84.0.4147.125
Edge (web)       • edge       • web-javascript • Microsoft Edge 84.0.522.59
.. 我不確定 Edge 能不能用,因為dockter 其中一個check 是 chrome,所以我還是裝了。

有關flutter for web app,這一篇 好像說得比較清楚。

沒有留言:

張貼留言