我用的是Mac，因此这里说的都是在Mac上的配置过程。
版本要求
- flutter >= 1.5
- dart >=2.3.0
安装webdev
用于本地服务器的启停
- 打开任意一个命令行窗口
- 运行：flutter pub global activate webdev
配置flutter环境变量
- 打开环境变量配置文件，命令行：open -e .bash_profile
- 添加 export FLUTTER_PUBCACHE=$FLUTTER_HOME/.pub-cache/bin，并在path中添加FLUTTER_PUBCACHE
export PATH=/bin:/usr/bin:/usr/local/bin:/usr/local/sbin:~/bin:/sbin:$PATH
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_212.jdk/Contents/Home
export CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar
export FLUTTER_HOME=/Library/flutter
export FLUTTER_PUBCACHE=$FLUTTER_HOME/.pub-cache/bin
export RN=/usr/local/bin
export ANDROID_HOME=/Users/username/Library/Android/sdk
export GRADLE_HOME=/Users/username/gradle/gradle-5.4.1
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=$PATH:$JAVA_HOME/bin:$FLUTTER_HOME/bin:$RN:$ANDROID_HOME:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$GRADLE_HOME/bin:$PUB_HOSTED_URL:$FLUTTER_STORAGE_BASE_URL:$FLUTTER_PUBCACHE
- 保存配置文件
- 使配置文件生效，命令行：source .bash_profile
clone flutter_web的代码
- 新建一个文件夹webflutter，并进入内部，打开命令行窗口
- git clone github.com/flutter/flu… 下载成功：
Cloning into 'flutter_web'...
remote: Enumerating objects: 51, done.
remote: Counting objects: 100% (51/51), done.
remote: Compressing objects: 100% (43/43), done.
remote: Total 5554 (delta 9), reused 26 (delta 7), pack-reused 5503
Receiving objects: 100% (5554/5554), 25.15 MiB | 484.00 KiB/s, done.
Resolving deltas: 100% (3211/3211), done.
zdeMacBook-Pro:webflutter youerusername$
- 进入示例文件夹，命令行 cd flutter_web/examples/hello_world/
- 安全依赖包：flutter pub upgrade 如果出现：
Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.
表示进入的不是一个flutte工程，回到上一步，看清楚，最终进入的是hello_word目录 如果出现：
! flutter_web 0.0.0 from path ../../packages/flutter_web
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui
Running "flutter pub upgrade" in hello_world...
表示依赖安装成功
- 启动本地服务器，webdev serve 我这里出现如下错误：
webdev could not run for this project.
The pubspec.yaml file has changed since the pubspec.lock file was generated, please run "pub get" again.
表示pubspec.yaml 文件发生了变化，重新运行：pub get 然后会下载一堆东西：
Resolving dependencies... (9.6s)
Warning: You are using these overridden dependencies:
! flutter_web 0.0.0 from path ../../packages/flutter_web
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui
Downloading build_web_compilers 2.5.1...
Downloading build_runner 1.7.1...
Downloading meta 1.1.8...
Downloading typed_data 1.1.6...
Downloading collection 1.14.12...
Downloading vector_math 2.0.8...
Downloading intl 0.16.0...
Downloading build_modules 2.6.1...
Downloading analyzer 0.38.5...
Downloading source_maps 0.10.9...
Downloading js 0.6.1+1...
Downloading source_span 1.5.5...
Downloading logging 0.11.4...
Downloading build 1.2.2...
Downloading path 1.6.4...
Downloading bazel_worker 0.1.23+1...
Downloading archive 2.0.13...
Downloading stack_trace 1.9.3...
Downloading glob 1.2.0...
Downloading pool 1.4.0...
Downloading crypto 2.1.4...
Downloading build_config 0.4.1+1...
Downloading scratch_space 0.0.4+2...
Downloading http_multi_server 2.2.0...
Downloading yaml 2.2.0...
Downloading graphs 0.2.0...
Downloading timing 0.1.1+2...
Downloading stream_transform 0.0.19...
Downloading pub_semver 1.4.4...
Downloading pubspec_parse 0.1.5...
Downloading build_resolvers 1.2.1...
Downloading build_daemon 2.1.0...
Downloading args 1.6.0...
Downloading watcher 0.9.7+14...
Downloading code_builder 3.2.0...
Downloading mime 0.9.6+3...
Downloading shelf 0.7.5...
Downloading pedantic 1.9.0...
Downloading build_runner_core 4.3.0...
Downloading shelf_web_socket 0.2.3...
Downloading io 0.3.3...
Downloading web_socket_channel 1.1.0...
Downloading async 2.4.1...
Downloading dart_style 1.3.3...
Downloading json_annotation 3.0.0...
Downloading front_end 0.1.27...
Downloading convert 2.1.1...
Downloading kernel 0.3.27...
Downloading html 0.14.0+3...
Downloading charcode 1.1.3...
Downloading package_config 1.1.0...
Downloading term_glyph 1.1.0...
Downloading protobuf 1.0.1...
Downloading node_io 1.0.1+2...
Downloading string_scanner 1.0.5...
Downloading checked_yaml 1.0.2...
Downloading package_resolver 1.0.10...
Downloading built_collection 4.2.2...
Downloading built_value 6.8.2...
Downloading matcher 0.12.6...
Downloading stream_channel 2.0.0...
Downloading http_parser 3.1.4...
Downloading csslib 0.16.1...
Downloading fixnum 0.10.11...
Downloading node_interop 1.0.3...
Downloading http 0.12.0+4...
Downloading quiver 2.1.3...
Downloading built_value_generator 6.8.2...
Downloading analyzer_plugin 0.2.1...
Downloading source_gen 0.9.4+6...
Got dependencies!
Precompiling executables... (10.1s)
Precompiled build_runner:graph_inspector.
Precompiled build_runner:build_runner.
- 再次运行：webdev serve 我这里出现了一个错误：
SocketException: Failed to create server socket (OS Error: Address already in use, errno = 48), address = 127.0.0.1, port = 8080
#0 _NativeSocket.bind (dart:io-patch/socket_patch.dart:603:7)
<asynchronous suspension>
#1 _RawServerSocket.bind (dart:io-patch/socket_patch.dart:1218:26)
#2 _ServerSocket.bind (dart:io-patch/socket_patch.dart:1478:29)
#3 ServerSocket.bind (dart:io-patch/socket_patch.dart:1469:26)
#4 _HttpServer.bind (dart:_http/http_impl.dart:2534:25)
#5 HttpServer.bind (dart:_http:227:19)
#6 HttpMultiServer.loopback.<anonymous closure> (package:http_multi_server/http_multi_server.dart:113:39)
#7 HttpMultiServer._loopback (package:http_multi_server/http_multi_server.dart:172:30)
<asynchronous suspension>
#8 HttpMultiServer.loopback (package:http_multi_server/http_multi_server.dart:111:12)
#9 HttpMultiServer.bind (package:http_multi_server/http_multi_server.dart:148:30)
#10 WebDevServer.start (package:webdev/src/serve/webdev_server.dart:123:38)
<asynchronous suspension>
#11 ServerManager.start (package:webdev/src/serve/server_manager.dart:23:38)
<asynchronous suspension>
#12 _startServerManager (package:webdev/src/serve/dev_workflow.dart:85:27)
<asynchronous suspension>
#13 DevWorkflow.start (package:webdev/src/serve/dev_workflow.dart:178:31)
<asynchronous suspension>
#14 ServeCommand.run (package:webdev/src/command/serve_command.dart:138:27)
<asynchronous suspension>
#15 CommandRunner.runCommand (package:args/command_runner.dart:197:27)
<asynchronous suspension>
#16 _CommandRunner.runCommand (package:webdev/src/webdev_command_runner.dart:38:24)
<asynchronous suspension>
#17 CommandRunner.run.<anonymous closure> (package:args/command_runner.dart:112:25)
#18 new Future.sync (dart:async/future.dart:224:31)
#19 CommandRunner.run (package:args/command_runner.dart:112:14)
#20 run (package:webdev/src/webdev_command_runner.dart:19:56)
#21 main (file:///Library/flutter/.pub-cache/hosted/pub.flutter-io.cn/webdev-2.5.1/bin/webdev.dart:17:22)
<asynchronous suspension>
#22 _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:299:32)
#23 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:172:12)
是因为localhost 127.0.0.1 8080已经被占用了。 发现是我的jenkins占用了该地址端口，停止jenkins：brew services stop jenkins-lts 再次重新：webdev serve
[INFO] Building new asset graph completed, took 1.5s
[INFO] Checking for unexpected pre-existing outputs. completed, took 2ms
[INFO] Serving `web` on http://127.0.0.1:8080
[INFO] Running build completed, took 17.1s
[INFO] Caching finalized dependency graph completed, took 156ms
[INFO] Succeeded after 17.3s with 558 outputs (3403 actions)
[INFO] ------------------------------------------------------------------------
启动成功
- 打开Chrome 地址栏输入：http://localhost:8080 页面出现：helloworld 表示成功
- 想要停止服务：在命令行那里按下：control+c
examples中还有个gallery的示例，我们去看一下
ls下examples：
custom_fonts hello_world readme.md
gallery html_platform_view spinning_square
- cd examples/gallery/
- flutter pub upgrade
- pub get
- webdev serve
- 浏览器：http://localhost:8080
