学习笔记：第一个Flutter web程序

配置环境

克隆flutter web仓库

git clone https://github.com/flutter/flutter_web.git

安装flutter web构建工具

进入flutter web仓库目录，执行如下命令，安装构建工具

$ flutter pub global activate webdev

Hello world

配置依赖（可选）

如果没有采用git clone获取的flutter web，那么你可能需要做一些额外的配置。
flutter web目录下有一个example目录，进入该目录的hello_world项目目录
打开pubspec.yaml配置文件，在相应的地方设置如下配置

name: flutter_web.examples.hello_world

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0

dependency_overrides:
  flutter_web:
    path: ../../packages/flutter_web
  flutter_web_ui:
    path: ../../packages/flutter_web_ui

#下面的配置，指定了flutter web的源
# flutter_web packages are not published to pub.dartlang.org
# These overrides tell the package tools to get them from GitHub
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

获取（升级）

hello_world项目目录，执行命令

$ flutter pub upgrade
或者
$ flutter pub get

成功后应看到类似信息

! 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...                    10.0s

运行

$ flutter pub global run webdev serve

成功则会看到类似信息

[INFO] Building new asset graph completed, took 1.4s

[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms

[INFO] Serving `web` on http://127.0.0.1:8080

使用浏览器打开http://localhost:8080