Flutter_web项目搭建AndroidStudio方式

1、下载flutter_web SDK

 

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

2、安装flutter_web的编译工具webdev

 

flutter pub global activate webdev

成功会出现以下界面：

Precompiling executables…
Precompiled webdev:webdev.
Installed executable webdev.
Activated webdev 2.0.6    // 版本号以实际为准

3、如果实在以前的项目中添加web功能，继续往下看，如果创建新项目，请跳转到第6步：

cd <flutter_web目录>/examples/hello_world

4、执行

flutter pub upgrade 或 pub upgrade

如果出现以下界面说明配置正确

RandyWeideMacBook-Pro:hello_world wei$ 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 packages get" in hello_world...  

5、执行

flutter pub global run webdev serve

出现以下界面就是成功了

RandyWeideMacBook-Pro:hello_world wei$ flutter pub global run webdev serve
[INFO] Building new asset graph completed, took 1.5s
[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 18.3s
[INFO] Caching finalized dependency graph completed, took 201ms
[INFO] Succeeded after 18.5s with 556 outputs (3217 actions)
[INFO] ------------------------------------------------------------------

6、安装stagehand，执行

flutter pub global activate stagehand

7、上一步成功之后执行：

flutter pub global run stagehand

出现以下界面说明成功

flutter pub global run stagehand

Stagehand will generate the given application type into the current directory.
usage: stagehand <generator-name>
    --[no-]analytics    Opt out of anonymous usage and crash reporting.
-h, --help              Help!
    --version           Display the version for stagehand.
    --author            The author name to use for file headers.
                        (defaults to "<your name>")

Available generators:
  console-full        - A command-line application sample.
  flutter-web-preview - A simple Flutter Web app.
  package-simple      - A starting point for Dart libraries or applications.
  server-shelf        - A web server built using the shelf package.
  web-angular         - A web app with material design components.
  web-simple          - A web app that uses only core Dart libraries.
  web-stagexl         - A starting point for 2D animation and games.

从第12行到18行是几种不同的模式，我以第17行为例，创建一个空白的web项目

8、打开新建的文件夹（是个空白文件夹就行）

cd 新建的文件夹

9、执行

flutter pub global run stagehand web-simple  //选择的的是web-simple模式

10、一个web项目就创建完成了，可以使用studio打开项目，使用flutter pub get配置好完之后，可以进行正常的代码了。

11、测试

命令行进入到项目中，直接执行

flutter pub global run webdev serve

12，成功！