This page covers the following steps for getting started with web support:
本页介绍了开始使用 Web 支持的以下步骤:
- Configure the
flutter
- tool for web support.
配置 'flutter' 工具以获得 Web 支持。 - Create a new project with web support.
创建一个具有 Web 支持的新项目。 - Run a new project with web support.
在 Web 支持下运行新项目。 - Build an app with web support.
构建具有 Web 支持的应用。 - Add web support to an existing project.
将 Web 支持添加到现有项目。
Requirements要求
To create a Flutter app with web support, you need the following software:
要创建一个支持 Web 的 Flutter 应用, 您需要以下软件:
- Flutter SDK. See the Flutter SDK installation instructions.
Flutter SDK。请参阅 Flutter SDK 安装说明。 - Chrome; debugging a web app requires the Chrome browser.
铬;调试 Web 应用需要 Chrome 浏览器。 - Optional: An IDE that supports Flutter. You can install Visual Studio Code, Android Studio, IntelliJ IDEA. Also install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor. See setting up an editor for more details.
可选:支持 Flutter 的 IDE。 可以安装 Visual Studio CodeAndroid StudioIntelliJ IDEA。 同时安装 Flutter 和 Dart 插件 启用语言支持和重构工具, 运行、调试和重新加载 Web 应用 在编辑器中。请参阅设置编辑器 了解更多详情。
For more information, see the web FAQ有关详细信息,请参阅 Web 常见问题解答.
Create a new project with web support
创建具有 Web 支持的新项目
You can use the following steps to create a new project with web support.
您可以使用以下步骤 以创建具有 Web 支持的新项目。
Set up建立
Run the following commands to use the latest version of the Flutter SDK:
执行以下命令,使用最新版本的 Flutter SDK。
content_copy
$ flutter channel stable
$ flutter upgrade
report_problem Warning: Running flutter channel stable
replaces your current version of Flutter with the stable version and can take time if your connection is slow. After this, running flutter upgrade
upgrades your install to the latest stable
. Returning to another channel (beta or master) requires calling flutter channel <channel>
explicitly.
report_problemWarning: 运行 'flutter channel stable' 会替换你当前版本的 Flutter 使用稳定版本,如果您的连接速度较慢,可能需要一些时间。 在此之后,运行 'flutter upgrade' 会将你的安装升级到最新版本 “稳定”。 返回到另一个频道(测试版或主版)需要调用 'flutter channel<channel>' 显式。If Chrome is installed, the flutter devices
command outputs a Chrome
device that opens the Chrome browser with your app running, and a Web Server
that provides the URL serving the app.
如果安装了 Chrome, 'flutter devices' 命令输出一个 'Chrome' 设备 打开正在运行应用的 Chrome 浏览器, 以及提供为应用提供服务的 URL 的“Web 服务器”。
content_copy
$ flutter devices
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150
In your IDE, you should see Chrome (web) in the device pulldown.
在 IDE 中,您应该会在设备下拉列表中看到 Chrome (Web)。