Flutter Web 环境搭建

自从谷歌 I/O2019 发布Flutter web版本之后，有好多开发者尝试搭建环境，我也不例外，先前在公司电脑上搭建过一次，只是没有总结出教程，趁着周末在家无聊，再次在家里电脑搭建环境，由于官方文档中推荐是 Visual Studio Code 创建的项目，所以我就顺便研究了完全用命令行创建 web 项目。

本文在 Mac 环境下完成，windows 环境大同小异，可作为参考。

官方英文文档：https://github.com/flutter/flutter_web

To use the Flutter SDK with the flutter_web preview make sure you have upgraded Flutter to at least v1.5.4 by running flutter upgrade from your machine. 在使用 flutter_web 预览版之前，要保证电脑中安装的 Flutter 版本是大于 1.5.4。

以下是我机器的 flutter doctor 信息：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.34.0)
[✓] Connected device (1 available)
• No issues found!

搭建步骤

1、从 github 上面把 flutter_web 项目克隆到本地

git clone https://github.com/flutter/flutter_web.git 存放目录随意，不过建议存放目录跟 flutter sdk 同级，日后更新维护好找

2、安装 flutter_web 的编译工具 webdev

flutter pub global activate webdev

安装过程可能出现如下信息，此为网友在 windows 上配置时出现的

Resolving dependencies …
It looks like pub.dartlang.org is having some trouble
Pub will wait for a while before trying to connect again.
Got socket error trying to find package webdev at https://pub.dartlang.org.
pub finished with exit code 69

此问题我没碰到过，如果出现上诉问题是因为网络问题，建议多尝试几次。

如果出现如下信息，则安装成功

Precompiling executables …
Precompiled webdev:webdev.
Installed executable webdev.
Activated webdev 2.0.6

上述信息中可能有一个 Warning 提示需要配置环境变量，按提示配置环境变量即可

可以尝试执行命令

flutter pub global run webdev

到此环境搭建成功了。

3、创建和启动项目

3.1 使用现有项目

flutter_web 目录下有 examples 几个 demo 项目，比如：hello_world

cd <flutter_web 目录>/examples/hello_world

执行

flutter pub upgrade
或
flutter pub get

如果出现

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...                   21.9s

说明项目配置成功了，然后就是启动本地服务，官方的命令是：webdev serve 实际使用过程中这个命令并不对 需要使用

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] ------------------------------------------------------------------------

然后就可以在浏览器使用信息中的地址 http://localhost:8080 访问到了。

3.2 创建新项目

官方给两种途径创建新项目 1 ）使用 Visual Studio Code，具体配置 Flutter Dart 插件就不多说。使用命令面板 Flutter: New Web Project，就可以创建一个新项目了，等配置完成后，按 F5 或者 Debug -> Start Debugging，就可以启动服务并自动打开浏览器。

2 ）使用 IntelliJ，没有研究

3 ）使用 Android Studio，因为本身我是开发安卓的，习惯使用 Studio 进行开发。然而 studio 并不能创建一个普通的 dart 项目，或者 flutter web 项目，相信后期官方一定是能支持的。

目前想使用 studio 写代码的，可以使用 Visual Studio Code，创建完项目完之后，再用 Android Studio 打开项目，也是可以的。

不过对于没有安装 Visual Studio Code 的同学来说的话，还可以用命令行来创建项目。

命令行创建 web 项目需要安装另一个工具

flutter pub global activate stagehand

跟安装 webdev 一样 安装成功后可以执行下面命令查看帮助

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.

可以看到这个工具可以按照 7 种模版创建项目，我们使用的是 flutter-web-preview，其他模版有兴趣的可以自行研究。

创建一个项目目录，然后

cd 目录

执行命令

flutter pub global run stagehand flutter-web-preview

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


Flutter Web 环境搭建

更多关于Flutter Web 环境搭建的实战教程也可以访问 https://www.itying.com/category-92-b0.html

3 回复

将***\flutter\bin\cache\dart-sdk\bin 添加到 path 就可以直接用 webdev serve 了。

更多关于Flutter Web 环境搭建的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


是个大佬。后来我也发现了。

关于Flutter Web环境搭建，以下是一个简洁明了的指南：

  1. 安装Flutter SDK：

    • 访问Flutter官方网站下载适合操作系统的Flutter SDK。
    • 解压下载的SDK到合适的路径，并配置环境变量。

  2. 安装编辑器：

    • 推荐使用Visual Studio Code（VS Code），并安装Flutter和Dart插件。

  3. 启用Web支持：

    • 在命令行中运行flutter config --enable-web命令，以启用Flutter的Web支持。

  4. 创建Flutter Web项目：

    • 使用flutter create my_flutter_web命令创建一个新的Flutter Web项目。
    • 如有需要，可以删除其他平台文件，只保留web文件夹。

  5. 运行项目：

    • 使用flutter run -d chrome --web-renderer canvaskit命令在Chrome浏览器中运行项目。
    • --web-renderer参数可选值包括canvaskit、html或auto，根据需求选择合适的渲染器。

  6. 打包项目：

    • 使用flutter build web命令打包Flutter Web项目。
    • 打包产物将生成在build/web目录下。

通过以上步骤，您可以成功搭建Flutter Web开发环境，并创建和运行Flutter Web项目。如果遇到任何问题，建议查阅Flutter官方文档或寻求社区帮助。

回到顶部