Flutter for web 開發環境搭建

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章