From e62520613723adfa1d4c51f34c49c28334ac1781 Mon Sep 17 00:00:00 2001 From: John Ryan Date: Mon, 25 Apr 2022 15:14:48 -0700 Subject: [PATCH 01/25] move web FAQ into directory --- src/development/platform-integration/{web.md => web/index.md} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename src/development/platform-integration/{web.md => web/index.md} (98%) diff --git a/src/development/platform-integration/web.md b/src/development/platform-integration/web/index.md similarity index 98% rename from src/development/platform-integration/web.md rename to src/development/platform-integration/web/index.md index 1937081586..b44aac6a2f 100644 --- a/src/development/platform-integration/web.md +++ b/src/development/platform-integration/web/index.md @@ -66,7 +66,7 @@ are supported as the default browsers for debugging your app. ### Can I build, run, and deploy web apps in any of the IDEs? You can select **Chrome** or **Edge** as the target device in -Android Studio/IntelliJ and VS Code. +Android Studio/IntelliJ and VS Code. The device pulldown should now include the **Chrome (web)** option for all channels. @@ -77,7 +77,7 @@ See [Creating responsive apps][]. ### Can I use Flutter plugins? -Yes, several plugins have web support. +Yes, several plugins have web support. Find an updated list of plugins on [pub.dev][] using the web filter. You can also add web support to existing plugins or [write your own plugins][] for the web. From da2bd1fe5f7c43972dc6d7c2fbc6813c36cbbfd0 Mon Sep 17 00:00:00 2001 From: John Ryan Date: Mon, 25 Apr 2022 15:32:35 -0700 Subject: [PATCH 02/25] Move index.md to faq.md --- src/development/platform-integration/web/{index.md => faq.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/development/platform-integration/web/{index.md => faq.md} (100%) diff --git a/src/development/platform-integration/web/index.md b/src/development/platform-integration/web/faq.md similarity index 100% rename from src/development/platform-integration/web/index.md rename to src/development/platform-integration/web/faq.md From b398580bf3a6b1115a6cc0c6ea386a80f154b53e Mon Sep 17 00:00:00 2001 From: John Ryan Date: Mon, 25 Apr 2022 15:33:03 -0700 Subject: [PATCH 03/25] Add web index page --- src/development/platform-integration/web/index.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/development/platform-integration/web/index.md diff --git a/src/development/platform-integration/web/index.md b/src/development/platform-integration/web/index.md new file mode 100644 index 0000000000..5fe4650fd7 --- /dev/null +++ b/src/development/platform-integration/web/index.md @@ -0,0 +1,4 @@ +--- +layout: toc +title: Web +--- From 5e6000d8358c84d7727ba1c7a478b22203bd0814 Mon Sep 17 00:00:00 2001 From: John Ryan Date: Mon, 25 Apr 2022 15:33:45 -0700 Subject: [PATCH 04/25] Move web renderers page to platform-integration/web directory --- .../web/renderers.md} | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) rename src/development/{tools/web-renderers.md => platform-integration/web/renderers.md} (87%) diff --git a/src/development/tools/web-renderers.md b/src/development/platform-integration/web/renderers.md similarity index 87% rename from src/development/tools/web-renderers.md rename to src/development/platform-integration/web/renderers.md index 18aa36435b..93522c546d 100644 --- a/src/development/tools/web-renderers.md +++ b/src/development/platform-integration/web/renderers.md @@ -8,13 +8,13 @@ renderers. This page describes both renderers and how to choose the best one for your needs. The two renderers are: **HTML renderer** - : Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. - This renderer has a smaller download size. +: Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. +This renderer has a smaller download size. **CanvasKit renderer** - : This renderer is fully consistent with Flutter mobile and desktop, has - faster performance with higher widget density, but adds about 2MB in - download size. +: This renderer is fully consistent with Flutter mobile and desktop, has +faster performance with higher widget density, but adds about 2MB in +download size. ## Command line options @@ -24,8 +24,8 @@ The `--web-renderer` command line option takes one of three values, `auto`, * `auto` (default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser. -* `html` - always use the HTML renderer. -* `canvaskit` - always use the CanvasKit renderer. +* `html` - always use the HTML renderer. +* `canvaskit` - always use the CanvasKit renderer. This flag can be used with the `run` or `build` subcommands. For example: @@ -68,7 +68,7 @@ mobile browsers and optimizing for performance on desktop browsers. Choose the `html` option if you are optimizing download size over performance on both desktop and mobile browsers. - + Choose the `canvaskit` option if you are prioritizing performance and pixel-perfect consistency on both desktop and mobile browsers. From dca524b7ab66506f0c9c2834a9d826bc25a29365 Mon Sep 17 00:00:00 2001 From: John Ryan Date: Mon, 25 Apr 2022 15:34:04 -0700 Subject: [PATCH 05/25] Add web initialization page --- .../web/initialization.md | 147 ++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 src/development/platform-integration/web/initialization.md diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md new file mode 100644 index 0000000000..3651ba0d65 --- /dev/null +++ b/src/development/platform-integration/web/initialization.md @@ -0,0 +1,147 @@ +--- +title: Customizing web app initialization +description: Customize how Flutter apps are initialized on the web +--- + +# Customizing web app initialization + +You can customize how a Flutter app is initialized on the web using the `_flutter.loader` JavaScript API. This API can be used to display a loading indicator in CSS, prevent the app from loading based on a condition, or wait until the user presses a button before showing the app. + +The initialization process is split into the following stages: + +* **Loading the entrypoint script** - Fetches the `main.dart.js` script and initializes the service worker. +* **Initializing the Flutter engine** - Initializes Flutter's web engine by downloading required resources such as assets, fonts, and CanvasKit. +* **Running the app** - Prepares the DOM for your Flutter app and runs it. + +This page shows how to add custom behavior at each stage of the initialization process. + + +## Getting started + +By default, the `index.html` file generated by the `flutter create` command contains a script tag that calls `loadEntrypoint` from the `flutter.js` file: + + +``` + + + + + + + + + +``` + + + +``` +Note: In Flutter 2.10 or earlier, this script doesn't support customization. To upgrade your index.html file to the latest version, see Upgrading an older project. +``` + + +The `loadEntrypoint` function returns a JavaScript [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves when the Service Worker is initialized and the `main.dart.js` entrypoint has been downloaded by the browser. It resolves with an **engine initializer** object that initializes the Flutter Web engine. + +The `initializeEngine()` function returns a promise that resolves with an **app runner** object that has a single method `runApp()` that runs the Flutter app. + + +## Customizing web app initialization + +In this section, learn how to customize each stage of your app’s initialization. + + +### Loading the entrypoint + +The `loadEntrypoint` method accepts these parameters: + + + +* `entrypointUrl`: the URL of your Flutter app's entrypoint. Defaults to `main.dart.js`. +* `serviceWorker`: the configuration of the `flutter_service_worker.js`. If this isn’t set, the service worker won’t be used + * `serviceWorkerVersion`: pass **the serviceWorkerVersion var set by the build process in your index.html file + * timeoutMillis: the timeout value for the service worker load. Defaults to 4000ms. + + +### Initializing the engine + +Instead of calling `initializeEngine()` on the engine initializer, you can call `autoStart()` to immediately start the app with the default configuration instead of using the app runner to call `runApp()`: + + +``` +_flutter.loader.loadEntrypoint({ + serviceWorker: { + serviceWorkerVersion: serviceWorkerVersion, + } +}).then(function(engineInitializer) { + return engineInitializer.autoStart(); +}); +``` + + + +## Example: How to display a progress indicator + +To give the user of your application feedback during the initialization process, use the hooks provided for each stage to update the DOM: + + +``` + + + + + + +
+ + + +``` + + +For a more practical example using CSS animations, see the [initialization code](https://github.com/flutter/gallery/blob/master/web/index.html) for the Flutter Gallery. + + +## Upgrading an older project + +If your project was created in Flutter 2.10 or earlier, you can create a new `index.html` file with the latest initialization template by running `flutter create`. + +From your project directory: + +``` + +flutter create . + +``` + +You can now customize the startup process as described above. From 0f94a36ab0c5cd7095879181d8bf790f5c617271 Mon Sep 17 00:00:00 2001 From: John Ryan Date: Mon, 25 Apr 2022 15:34:09 -0700 Subject: [PATCH 06/25] Update sidenav --- src/_data/sidenav.yml | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/_data/sidenav.yml b/src/_data/sidenav.yml index 8b6c9a6809..0f99afdce5 100644 --- a/src/_data/sidenav.yml +++ b/src/_data/sidenav.yml @@ -155,10 +155,17 @@ permalink: /development/platform-integration/c-interop - title: Hosting native Android and iOS views permalink: /development/platform-integration/platform-views - - title: Web FAQ - permalink: /development/platform-integration/web - title: Writing platform-specific code permalink: /development/platform-integration/platform-channels + - title: Web + permalink: /development/platform-integration/web + children: + - title: Web FAQ + permalink: /development/platform-integration/web/faq + - title: Web renderers + permalink: /development/platform-integration/web/renderers + - title: Custom initialization + permalink: /development/platform-integration/web/initialization - title: Desktop permalink: /desktop - title: Packages & plugins @@ -274,8 +281,6 @@ permalink: /development/tools/flutter-fix - title: Code formatting permalink: /development/tools/formatting - - title: Web renderers - permalink: /development/tools/web-renderers - title: Migration notes permalink: /development/androidx-migration children: From cd491fee4fa164c3fb2b7c1ba5ed0950ad147a0f Mon Sep 17 00:00:00 2001 From: John Ryan Date: Mon, 25 Apr 2022 15:53:09 -0700 Subject: [PATCH 07/25] update web/initialization page --- .../web/initialization.md | 88 +++++++++++++------ 1 file changed, 59 insertions(+), 29 deletions(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index 3651ba0d65..4e478128c2 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -5,21 +5,33 @@ description: Customize how Flutter apps are initialized on the web # Customizing web app initialization -You can customize how a Flutter app is initialized on the web using the `_flutter.loader` JavaScript API. This API can be used to display a loading indicator in CSS, prevent the app from loading based on a condition, or wait until the user presses a button before showing the app. +You can customize how a Flutter app is initialized on the web +using the `_flutter.loader` JavaScript API. +This API can be used to display a loading indicator in CSS, +prevent the app from loading based on a condition, +or wait until the user presses a button before showing the app. The initialization process is split into the following stages: -* **Loading the entrypoint script** - Fetches the `main.dart.js` script and initializes the service worker. -* **Initializing the Flutter engine** - Initializes Flutter's web engine by downloading required resources such as assets, fonts, and CanvasKit. -* **Running the app** - Prepares the DOM for your Flutter app and runs it. - -This page shows how to add custom behavior at each stage of the initialization process. +* **Loading the entrypoint script** - + Fetches the `main.dart.js` script + and initializes the service worker. +* **Initializing the Flutter engine** - + Initializes Flutter's web engine + by downloading required resources + such as assets, fonts, and CanvasKit. +* **Running the app** - + Prepares the DOM for your Flutter app and runs it. +This page shows how to add custom behavior +at each stage of the initialization process. ## Getting started -By default, the `index.html` file generated by the `flutter create` command contains a script tag that calls `loadEntrypoint` from the `flutter.js` file: - +By default, the `index.html` file +generated by the `flutter create` command +contains a script tag +that calls `loadEntrypoint` from the `flutter.js` file: ``` @@ -50,36 +62,52 @@ By default, the `index.html` file generated by the `flutter create` command cont -``` -Note: In Flutter 2.10 or earlier, this script doesn't support customization. To upgrade your index.html file to the latest version, see Upgrading an older project. -``` +{{site.alert.note}} +*Note:* In Flutter 2.10 or earlier, +this script doesn't support customization. +To upgrade your index.html file to the latest version, +see Upgrading an older project. +{{site.alert.end}} -The `loadEntrypoint` function returns a JavaScript [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that resolves when the Service Worker is initialized and the `main.dart.js` entrypoint has been downloaded by the browser. It resolves with an **engine initializer** object that initializes the Flutter Web engine. -The `initializeEngine()` function returns a promise that resolves with an **app runner** object that has a single method `runApp()` that runs the Flutter app. +The `loadEntrypoint` function returns a JavaScript [Promise][js-promise] +that resolves when the Service Worker is initialized +and the `main.dart.js` entrypoint has been downloaded by the browser. +It resolves with an **engine initializer** object +that initializes the Flutter Web engine. +The `initializeEngine()` function returns a promise +that resolves with an **app runner** object +that has a single method `runApp()` that runs the Flutter app. -## Customizing web app initialization +[js-promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise -In this section, learn how to customize each stage of your app’s initialization. +## Customizing web app initialization +In this section, +learn how to customize each stage of your app’s initialization. ### Loading the entrypoint The `loadEntrypoint` method accepts these parameters: - - -* `entrypointUrl`: the URL of your Flutter app's entrypoint. Defaults to `main.dart.js`. -* `serviceWorker`: the configuration of the `flutter_service_worker.js`. If this isn’t set, the service worker won’t be used - * `serviceWorkerVersion`: pass **the serviceWorkerVersion var set by the build process in your index.html file - * timeoutMillis: the timeout value for the service worker load. Defaults to 4000ms. +* `entrypointUrl`: The URL of your Flutter app's entrypoint. + Defaults to `main.dart.js`. +* `serviceWorker`: The configuration of the `flutter_service_worker.js`. + If this isn’t set, the service worker won’t be used. + * `serviceWorkerVersion`: pass *the `serviceWorkerVersion` var* set by + the build process in your index.html file + * `timeoutMillis`: the timeout value for the service worker load. + Defaults to 4000ms. ### Initializing the engine -Instead of calling `initializeEngine()` on the engine initializer, you can call `autoStart()` to immediately start the app with the default configuration instead of using the app runner to call `runApp()`: +Instead of calling `initializeEngine()` on the engine initializer, +you can call `autoStart()` to immediately start the app +with the default configuration +instead of using the app runner to call `runApp()`: ``` @@ -92,11 +120,11 @@ _flutter.loader.loadEntrypoint({ }); ``` - - ## Example: How to display a progress indicator -To give the user of your application feedback during the initialization process, use the hooks provided for each stage to update the DOM: +To give the user of your application feedback +during the initialization process, +use the hooks provided for each stage to update the DOM: ``` @@ -129,19 +157,21 @@ To give the user of your application feedback during the initialization process, ``` -For a more practical example using CSS animations, see the [initialization code](https://github.com/flutter/gallery/blob/master/web/index.html) for the Flutter Gallery. +For a more practical example using CSS animations, +see the [initialization code][gallery-init] for the Flutter Gallery. +[gallery-init]: https://github.com/flutter/gallery/blob/master/web/index.html ## Upgrading an older project -If your project was created in Flutter 2.10 or earlier, you can create a new `index.html` file with the latest initialization template by running `flutter create`. +If your project was created in Flutter 2.10 or earlier, +you can create a new `index.html` file +with the latest initialization template by running `flutter create`. From your project directory: ``` - flutter create . - ``` You can now customize the startup process as described above. From 548af092e52e1bd078437d5b4de23b2bf968ae70 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:26:02 -0700 Subject: [PATCH 08/25] Update src/development/platform-integration/web/initialization.md Co-authored-by: Parker Lougheed --- src/development/platform-integration/web/initialization.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index 4e478128c2..789a307318 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -3,8 +3,6 @@ title: Customizing web app initialization description: Customize how Flutter apps are initialized on the web --- -# Customizing web app initialization - You can customize how a Flutter app is initialized on the web using the `_flutter.loader` JavaScript API. This API can be used to display a loading indicator in CSS, From 987c46760b8967f07d083f9c243a128bc2759531 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:28:47 -0700 Subject: [PATCH 09/25] Update src/development/platform-integration/web/initialization.md Co-authored-by: Parker Lougheed --- src/development/platform-integration/web/initialization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index 789a307318..4307a010b6 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -31,7 +31,7 @@ generated by the `flutter create` command contains a script tag that calls `loadEntrypoint` from the `flutter.js` file: -``` +```html From d3a8f51af890aaebb4576cf22ff0322b3b55de56 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:31:09 -0700 Subject: [PATCH 10/25] Update src/development/platform-integration/web/initialization.md Co-authored-by: Parker Lougheed --- .../platform-integration/web/initialization.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index 4307a010b6..d7b3079e26 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -61,10 +61,10 @@ that calls `loadEntrypoint` from the `flutter.js` file: {{site.alert.note}} -*Note:* In Flutter 2.10 or earlier, -this script doesn't support customization. -To upgrade your index.html file to the latest version, -see Upgrading an older project. + In Flutter 2.10 or earlier, + this script doesn't support customization. + To upgrade your `index.html` file to the latest version, + see [Upgrading an older project](#upgrading-an-older-project). {{site.alert.end}} From c54c2a3af4e06774d12a86cefdb7c0c42666fa65 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:36:19 -0700 Subject: [PATCH 11/25] Update src/development/platform-integration/web/initialization.md Co-authored-by: Parker Lougheed --- src/development/platform-integration/web/initialization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index d7b3079e26..cd23d10943 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -169,7 +169,7 @@ with the latest initialization template by running `flutter create`. From your project directory: ``` -flutter create . +$ flutter create . ``` You can now customize the startup process as described above. From 788a20ac6dc4f125171f48e4efdf192363efd021 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:36:40 -0700 Subject: [PATCH 12/25] Update src/development/platform-integration/web/initialization.md Co-authored-by: Parker Lougheed --- src/development/platform-integration/web/initialization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index cd23d10943..528758dd69 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -108,7 +108,7 @@ with the default configuration instead of using the app runner to call `runApp()`: -``` +```js _flutter.loader.loadEntrypoint({ serviceWorker: { serviceWorkerVersion: serviceWorkerVersion, From 11cf97159e857a5f2c7027b49e540e168e92d3ad Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:36:48 -0700 Subject: [PATCH 13/25] Update src/development/platform-integration/web/initialization.md Co-authored-by: Parker Lougheed --- src/development/platform-integration/web/initialization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index 528758dd69..3365ad3fd9 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -125,7 +125,7 @@ during the initialization process, use the hooks provided for each stage to update the DOM: -``` +```html From 838637de851fc5c648d859f24bd70f3e459e6458 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:48:27 -0700 Subject: [PATCH 14/25] Update src/_data/sidenav.yml --- src/_data/sidenav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_data/sidenav.yml b/src/_data/sidenav.yml index 0f99afdce5..2e56aa058c 100644 --- a/src/_data/sidenav.yml +++ b/src/_data/sidenav.yml @@ -164,7 +164,7 @@ permalink: /development/platform-integration/web/faq - title: Web renderers permalink: /development/platform-integration/web/renderers - - title: Custom initialization + - title: Custom app initialization permalink: /development/platform-integration/web/initialization - title: Desktop permalink: /desktop From c26fd29793950bb2c754905be41676f859229971 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:48:35 -0700 Subject: [PATCH 15/25] Update src/development/platform-integration/web/initialization.md --- .../platform-integration/web/initialization.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index 3365ad3fd9..1754ee5700 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -11,15 +11,13 @@ or wait until the user presses a button before showing the app. The initialization process is split into the following stages: -* **Loading the entrypoint script** - - Fetches the `main.dart.js` script - and initializes the service worker. -* **Initializing the Flutter engine** - - Initializes Flutter's web engine - by downloading required resources - such as assets, fonts, and CanvasKit. -* **Running the app** - - Prepares the DOM for your Flutter app and runs it. +**Loading the entrypoint script** +: Fetches the `main.dart.js` script and initializes the service worker. +**Initializing the Flutter engine** +: Initializes Flutter's web engine by downloading required resources + such as assets, fonts, and CanvasKit. +**Running the app** +: Prepares the DOM for your Flutter app and runs it. This page shows how to add custom behavior at each stage of the initialization process. From 99e22b296f6ac3f3dd88eeebec899cf167322602 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:48:46 -0700 Subject: [PATCH 16/25] Update src/development/platform-integration/web/initialization.md --- src/development/platform-integration/web/initialization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index 1754ee5700..acfe6421f2 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -19,7 +19,7 @@ The initialization process is split into the following stages: **Running the app** : Prepares the DOM for your Flutter app and runs it. -This page shows how to add custom behavior +This page shows how to customize the behavior at each stage of the initialization process. ## Getting started From 9f863a0f9cef6adf645f448727436083594a1ab4 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:49:07 -0700 Subject: [PATCH 17/25] Update src/development/platform-integration/web/initialization.md --- src/development/platform-integration/web/initialization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index acfe6421f2..6834665cf3 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -67,7 +67,7 @@ that calls `loadEntrypoint` from the `flutter.js` file: -The `loadEntrypoint` function returns a JavaScript [Promise][js-promise] +The `loadEntrypoint` function returns a JavaScript [`Promise`][js-promise] that resolves when the Service Worker is initialized and the `main.dart.js` entrypoint has been downloaded by the browser. It resolves with an **engine initializer** object From aa2337e1b48779c173f955c8b63e106b947ffcd2 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:49:30 -0700 Subject: [PATCH 18/25] Update src/development/platform-integration/web/initialization.md --- src/development/platform-integration/web/initialization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index 6834665cf3..ce67120068 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -156,7 +156,7 @@ use the hooks provided for each stage to update the DOM: For a more practical example using CSS animations, see the [initialization code][gallery-init] for the Flutter Gallery. -[gallery-init]: https://github.com/flutter/gallery/blob/master/web/index.html +[gallery-init]: {{site.github}}/flutter/gallery/blob/master/web/index.html ## Upgrading an older project From 452ba75f826a3ef7f9217f44e482fffb3aea3f8c Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:49:38 -0700 Subject: [PATCH 19/25] Update src/development/platform-integration/web/initialization.md --- src/development/platform-integration/web/initialization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index ce67120068..ce2d1a36bf 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -116,7 +116,7 @@ _flutter.loader.loadEntrypoint({ }); ``` -## Example: How to display a progress indicator +## Example: Display a progress indicator To give the user of your application feedback during the initialization process, From ffa79125a95379efec24d74867df681ef54c1211 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:49:50 -0700 Subject: [PATCH 20/25] Update src/development/platform-integration/web/initialization.md --- .../web/initialization.md | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index ce2d1a36bf..63d1d6049f 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -88,14 +88,20 @@ learn how to customize each stage of your app’s initialization. The `loadEntrypoint` method accepts these parameters: -* `entrypointUrl`: The URL of your Flutter app's entrypoint. - Defaults to `main.dart.js`. -* `serviceWorker`: The configuration of the `flutter_service_worker.js`. - If this isn’t set, the service worker won’t be used. - * `serviceWorkerVersion`: pass *the `serviceWorkerVersion` var* set by - the build process in your index.html file - * `timeoutMillis`: the timeout value for the service worker load. - Defaults to 4000ms. +`entrypointUrl` +: The URL of your Flutter app's entrypoint. Defaults to `main.dart.js`. + +`serviceWorker` +: The configuration of the `flutter_service_worker.js` file. + If this isn’t set, the service worker won’t be used. + +`serviceWorkerVersion` +: Pass *the `serviceWorkerVersion` var* set by + the build process in your index.html file. + +`timeoutMillis` +: The timeout value for the service worker load. + Defaults to 4000ms. ### Initializing the engine From d297654e622c61fac49377b1960673656533e458 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 16:50:05 -0700 Subject: [PATCH 21/25] Update src/development/platform-integration/web/index.md --- src/development/platform-integration/web/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/index.md b/src/development/platform-integration/web/index.md index 5fe4650fd7..4a5aa9fa81 100644 --- a/src/development/platform-integration/web/index.md +++ b/src/development/platform-integration/web/index.md @@ -1,4 +1,4 @@ --- -layout: toc title: Web +layout: toc --- From f7147ebe69f8d5e099e6758928be3353c3bbcc3c Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 17:01:56 -0700 Subject: [PATCH 22/25] Update src/development/platform-integration/web/initialization.md --- src/development/platform-integration/web/initialization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/initialization.md b/src/development/platform-integration/web/initialization.md index 63d1d6049f..ea9e887628 100644 --- a/src/development/platform-integration/web/initialization.md +++ b/src/development/platform-integration/web/initialization.md @@ -170,7 +170,7 @@ If your project was created in Flutter 2.10 or earlier, you can create a new `index.html` file with the latest initialization template by running `flutter create`. -From your project directory: +From your project directory, run the following: ``` $ flutter create . From b1f950857f1b0b61f2a993e15eccf355da230b0d Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 17:02:09 -0700 Subject: [PATCH 23/25] Update src/development/platform-integration/web/renderers.md --- src/development/platform-integration/web/renderers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/development/platform-integration/web/renderers.md b/src/development/platform-integration/web/renderers.md index 93522c546d..0d6b5d0a67 100644 --- a/src/development/platform-integration/web/renderers.md +++ b/src/development/platform-integration/web/renderers.md @@ -9,7 +9,7 @@ your needs. The two renderers are: **HTML renderer** : Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. -This renderer has a smaller download size. + This renderer has a smaller download size. **CanvasKit renderer** : This renderer is fully consistent with Flutter mobile and desktop, has From 7ca6610d57f1a19e00fadf81eb8702835bd200ee Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 17:02:18 -0700 Subject: [PATCH 24/25] Update src/development/platform-integration/web/renderers.md --- src/development/platform-integration/web/renderers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/development/platform-integration/web/renderers.md b/src/development/platform-integration/web/renderers.md index 0d6b5d0a67..ac3c40bf7e 100644 --- a/src/development/platform-integration/web/renderers.md +++ b/src/development/platform-integration/web/renderers.md @@ -13,8 +13,8 @@ your needs. The two renderers are: **CanvasKit renderer** : This renderer is fully consistent with Flutter mobile and desktop, has -faster performance with higher widget density, but adds about 2MB in -download size. + faster performance with higher widget density, but adds about 2MB in + download size. ## Command line options From 48bc754f0088b386f75d7dfdde7fc047190b4d01 Mon Sep 17 00:00:00 2001 From: "Shams Zakhour (ignore Sfshaza)" <44418985+sfshaza2@users.noreply.github.com> Date: Tue, 26 Apr 2022 17:02:28 -0700 Subject: [PATCH 25/25] Update src/development/platform-integration/web/renderers.md --- src/development/platform-integration/web/renderers.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/development/platform-integration/web/renderers.md b/src/development/platform-integration/web/renderers.md index ac3c40bf7e..52109d8e99 100644 --- a/src/development/platform-integration/web/renderers.md +++ b/src/development/platform-integration/web/renderers.md @@ -24,8 +24,8 @@ The `--web-renderer` command line option takes one of three values, `auto`, * `auto` (default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser. -* `html` - always use the HTML renderer. -* `canvaskit` - always use the CanvasKit renderer. +* `html` - always use the HTML renderer +* `canvaskit` - always use the CanvasKit renderer This flag can be used with the `run` or `build` subcommands. For example: