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