1. 搭建環境
- 首先安裝flutter sdk
- Clone the flutter_web source code(檢出 flutter_web的源碼)
git clone https://github.com/flutter/flutter_web.git
- Install the flutter_web build tools(安裝 flutter_web的開發工具)
flutter pub global activate webdev
- Ensure that the $HOME/.pub-cache/bin directory is in your path, and then you may use the webdev command directly from your terminal. (前一步安裝後會提示實際路徑,如 E:\flutter\.pub-cache\bin)
flutter內部使用的一些命令無法找到,實際上是dart sdk的path沒有設置,增加E:\flutter\bin\cache\dart-sdk\bin 到path就ok了。
Locate the file flutter_console.bat inside the flutter directory. Start it by double-clicking.
- Run the hello_world example
cd examples/hello_world/
flutter pub upgrade
webdev serve(可能需要先執行pub get)
Tools support for Flutter web development
Visual Studio Code
Visual Studio Code supports Flutter web development with the v3.0 release of the Flutter extension.
- install the Flutter SDK
- set up VS Code
- configure VS Code to point to your local Flutter SDK
- run the Flutter: New Web Project command from VS Code
- after the project is created, run your app by pressing F5 or "Debug -> Start Debugging"
- VS Code will use the webdev command-line tool to build and run your app; a new Chrome window should open, showing your running app
Configuring Flutter to use a mirror site
If you’re installing or using Flutter in China, it may be helpful to use a trustworthy local mirror site that hosts Flutter’s dependencies. To instruct the Flutter tool to use an alternate storage location, you need to set two environment variables, PUB_HOSTED_URL and FLUTTER_STORAGE_BASE_URL, before running the flutter command.
Taking MacOS or Linux as an example, here are the first few steps in the setup process for using a mirror site. Run the following in a Bash shell from the directory where you wish to store your local Flutter clone:
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn $ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
使用vs code的 Flutter: New Web Project 創建的項目無法運行的問題(不能pub get):
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
缺省生成的依賴沒對。
修改方式1(直接使用本地下載的flutter web項目):
dependency_overrides:
flutter_web:
path: E:/test/flutter/flutter_web/packages/flutter_web
flutter_web_ui:
path: E:/test/flutter/flutter_web/packages/flutter_web_ui
修改方式2(參考https://dart.dev/tools/pub/dependencies , url: https://github.com/flutter/flutter_web 修改爲 url: https://github.com/flutter/flutter_web.git):
pub assumes that the package is in the root of the Git repository. To specify a different location in the repo, use the path argument:
dependencies: kittens: git: url: git://github.com/munificent/cats.git path: path/to/kittens
The path is relative to the Git repo’s root.
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web.git
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web.git
path: packages/flutter_web_ui