Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 51 additions & 36 deletions src/content/platform-integration/web/building.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ to an existing project.
To create a new app that includes web support, run the following command:

```console
$ flutter create my_app
$ flutter create my_app
```

### Add web support to an existing project
Expand All @@ -38,10 +38,14 @@ $ flutter create . --platforms web
```

This creates a `web/` directory containing the web assets used to bootstrap
and run your Flutter app.
and run your Flutter app.

## Run your app

See the following sections to run your app.

### Run your app from the command line

Select [Chrome][] as your app's target device to run and debug
a Flutter web app:

Expand All @@ -58,68 +62,79 @@ navigate to a local URL in the browser of your choice.
<a id="hot-reload-web" aria-hidden="true" ></a>

:::note Hot reload on the web
As of the Flutter 3.32 release, you can experiment
with hot reload on the web behind a flag.
[Hot restart][], which restarts your app
without refreshing the web page,
doesn't require a flag.
As of the Flutter 3.35 release,
hot reload is enabled by default on the web.
[Hot restart][] is still available as well.

If you discover any issues we ask that you file a bug
using our new [Web Hot Reload issue template][].
using our [Web Hot Reload issue template][].
Note this is in the Dart SDK repository where it's easier
for us to track issues. Known issues can be seen in the
associated [GitHub project][].
associated [GitHub project][].
:::

### Run your app using WebAssembly

You can pass the `--wasm` flag to run your app using WebAssembly:

To try hot reload for the web, pass the `--web-experimental-hot-reload` flag
wherever you invoke `flutter run -d chrome`.
```console
$ flutter run -d chrome --wasm
```

### Running from VS Code
Flutter web offers multiple build modes and renderers.
For more information, see [Web renderers][].

If you use debug configurations in VS code,
you can add this extra configuration to your
[`launch.json` file][].
### Disable hot reload in VS Code

To temporarily disable hot reload support from VS Code,
update your [`launch.json` file][] file with
the flag `--no-web-experimental-hot-reload`.

```plaintext
"configurations": [
...
{
"name": "Flutter for web (hot reload disabled)",
"type": "dart",
"request": "launch",
"program": "lib/main.dart",
"args": [
"-d",
"chrome",
"--no-web-experimental-hot-reload",
]
}
]
```

### Running from the command line
### Disable hot reload from the command line

If you use `flutter run` from the command line,
you can now run hot reload on the web with the
you can temporarily disable hot reload on the web with the
following command:

```console
flutter run -d chrome --web-experimental-hot-reload
flutter run -d chrome --no-web-experimental-hot-reload
```

When hot reload is enabled,
you can reload your application by pressing "r"
in the running terminal, or "R" to hot restart.

### Reloading in DartPad
### Use hot reload in DartPad

Hot reload is also enabled in DartPad with a new "Reload" button.
The feature is only available if Flutter is detected
in the running application. You can begin a hot reloadable
session by selecting a sample app provided by DartPad.

:::

[Hot restart]: /tools/hot-reload
[How to switch channels]: /install/upgrade#switching-flutter-channels
[`launch.json` file]: https://code.visualstudio.com/docs/debugtest/debugging-configuration
[Web Hot Reload issue template]: {{site.github}}/dart-lang/sdk/issues/new?template=6_web_hot_reload.yml
[Web Hot Reload issue template]: {{site.github}}/dart-lang/sdk/issues/new?template=5_web_hot_reload.yml
[GitHub project]: {{site.github}}/orgs/dart-lang/projects/107/views/1

### Run your app using WebAssembly

You can pass the `--wasm` flag to run your app using WebAssembly:

```console
$ flutter run -d chrome --wasm
```
## Build your app

Flutter web offers multiple build modes and renderers.
For more information, see [Web renderers][].
See the following sections to build your app.

## Build your app
### Build your app from the command line

Run the following command to generate a release build:

Expand Down
16 changes: 8 additions & 8 deletions src/content/tools/hot-reload.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,25 +76,25 @@ The code updates and execution continues.
**What is the difference between hot reload, hot restart,
and full restart?**

* **Hot reload** loads code changes into the VM and re-builds
the widget tree, preserving the app state;
* **Hot reload** loads code changes into the VM or the browser,
and re-builds the widget tree, preserving the app state;
it doesn't rerun `main()` or `initState()`.
(`⌘\` in Intellij and Android Studio, `⌃F5` in VSCode)
* **Hot restart** loads code changes into the VM,
* **Hot restart** loads code changes into the VM or the browser,
and restarts the Flutter app, losing the app state.
On the web, this can restart the app without a full page refresh.
(`⇧⌘\` in IntelliJ and Android Studio, `⇧⌘F5` in VSCode)
* **Full restart** restarts the iOS, Android, or web app.
This takes longer because it also recompiles the
Java / Kotlin / Objective-C / Swift code. On the web,
it also restarts the Dart Development Compiler.
Java / Kotlin / Objective-C / Swift / JavaScript code.
On the web, it also restarts the Dart Development Compiler.
There is no specific keyboard shortcut for this;
you need to stop and start the run configuration.

Flutter web currently supports hot restart and
[hot reload behind an experimental flag][].
Flutter web now supports hot restart and [hot reload][].
:::

[hot reload behind an experimental flag]: /platform-integration/web/building#hot-reload-web
[hot reload]: /platform-integration/web/building#hot-reload-web

![Android Studio UI](/assets/images/docs/development/tools/android-studio-run-controls.png){:width="100%"}<br>
Controls for run, run debug, hot reload, and hot restart in Android Studio
Expand Down
Loading