Flutter For Web 创建和运行Web应用程序

最新推荐文章于 2025-09-12 15:03:32 发布

原创

最新推荐文章于 2025-09-12 15:03:32 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #flutter2web #创建 #flutter创建和运行

本文详细介绍如何使用Flutter进行Web开发，包括环境搭建、IDE配置、项目创建及运行流程。Flutter for Web允许开发者将Dart编写的代码转换为标准Web技术，实现跨平台应用。

Flutter 汇总请看这里

文章目录

- 安装

Flutter于2017年5月在Google I / O上首次使用Alpha工具包发布，并于2018年在Google I / O上发布，最终通过未来的新产品HummingBird达到1.0版，并于2019年5月7日在Google IO 2019上，谷歌终于宣布推出Flutter for Web预览版。

Flutter的创建旨在为开发人员提供快速的开发框架，并为用户提供出色的参与和快速体验。Flutter for Web是Flutter的代码兼容实现，使用基于标准的Web技术（HTML，CSS和JavaScript）呈现。借助Flutter for Web，可以将Dart编写的现有Flutter代码编译为可嵌入到浏览器中并部署到任何Web服务器的客户端。可以使用Flutter的所有功能，并且不需要浏览器插件。

安装

升级Flutter至指定版本

为了开发web，需要Flutter 1.5及以上版本，它支持使用Flutter来定位web，包括将Dart编译成JavaScript。使用Flutter SDK与flutter_web预览，确保已经通过flutter upgrade升级Flutter至v1.5.4

$ flutter upgrade

安装Flutter for web构建工具

要安装该webdev软件包，该软件包提供了Flutter for web的构建工具，请运行以下命令：

$ flutter packages pub global activate webdev

配置环境变量

$ touch ~/.bash_profile; open ~/.bash_profile

将使用TextEdit打开文件，确保对PATH中的所有组件都有引用并保存。

确保配置了$HOME/.pub-cache/bin环境变量，然后可以直接在
终端上使用webdev命令。

flutter sdk:
export PATH=$PATH:[Path to your flutter directory]/flutter/bin

dart sdk:
export PATH=$PATH:[Path to your flutter directory]
/flutter/bin/cache/dart-sdk/bin

webdev:
mac: export PATH=$PATH:$HOME/.pub-cache/bin
windows: %USERPROFILE%\AppData\Roaming\Pub\Cache\bin
linux: $HOME/flutter