v1: Web Multi-View - embedding Flet web app into existing web page

client/lib/main.dart

@@ -104,13 +104,21 @@ void main([List<String>? args]) async {
     };
   }
 
-  runApp(FletApp(
+  var app = FletApp(
     title: 'Flet',
     pageUrl: pageUrl,
     assetsDir: assetsDir,
     errorsHandler: errorsHandler,
     showAppStartupScreen: true,
     appStartupScreenMessage: "Working...",
     extensions: extensions,
-  ));
+    multiView: isMultiView(),
+  );
+
+  if (app.multiView) {
+    debugPrint("Flet Web Multi-View mode");
+    runWidget(app);
+  } else {
+    runApp(app);
+  }
 }

client/web/flutter_bootstrap.js

@@ -2,24 +2,31 @@
 {{flutter_build_config}}
 
 var loading = document.querySelector('#loading');
-var config = {};
-if (webRenderer != "auto") {
-    config.renderer = webRenderer;
+
+var flutterConfig = {
+    multiViewEnabled: flet.multiView,
+    assetBase: flet.assetBase
+};
+if (flet.webRenderer != "auto") {
+    flutterConfig.renderer = flet.webRenderer;
 }
-if (globalThis.canvasKitBaseUrl) {
-    config.canvasKitBaseUrl = globalThis.canvasKitBaseUrl;
+if (flet.noCdn) {
+    flutterConfig.canvasKitBaseUrl = flet.canvasKitBaseUrl;
+    flutterConfig.fontFallbackBaseUrl = flet.fontFallbackBaseUrl;
 }
+
 _flutter.loader.load({
-    config: config,
+    config: flutterConfig,
     serviceWorkerSettings: {
         serviceWorkerVersion: {{flutter_service_worker_version}},
     },
     onEntrypointLoaded: async function (engineInitializer) {
         loading.classList.add('main_done');
-        const appRunner = await engineInitializer.initializeEngine({useColorEmoji: useColorEmoji});
+        const engine = await engineInitializer.initializeEngine(flutterConfig);
 
         loading.classList.add('init_done');
-        await appRunner.runApp();
+        flet.flutterApp = await engine.runApp();
+        flet.flutterAppResolve(flet.flutterApp);
 
         window.setTimeout(function () {
             loading.remove();

client/web/index.html

@@ -17,33 +17,62 @@
   <!-- Favicon -->
   <link rel="icon" type="image/png" href="favicon.png" />
 
-  <!-- Flet specific -->
-  <meta name="flet-route-url-strategy" content="%FLET_ROUTE_URL_STRATEGY%">
-  <meta name="flet-web-pyodide" content="%FLET_WEB_PYODIDE%">
-  <meta name="flet-websocket-endpoint-path" content="/ws">
-
   <title>Flet</title>
   <link rel="manifest" href="manifest.json">
 
   <script>
-    var webRenderer = "auto";
-    var useColorEmoji = false;
-    var appPackageUrl = "app.tar.gz";
-    var noCdn = false;
-  </script>
-
-  <!-- webRenderer -->
-  <!-- useColorEmoji -->
-  <!-- pyodideCode -->
-  <!-- noCdn -->
-
-  <script>
-    if (noCdn) {
-      var canvasKitBaseUrl = "/canvaskit/";
-      var pyodideUrl = "/pyodide/pyodide.js";
+    var flet = {
+      pyodide: false,
+      multiView: false,
+      noCdn: false,
+      webSocketEndpoint: "/ws",
+      assetBase: "/",
+      routeUrlStrategy: "path",
+      canvasKitBaseUrl: "/canvaskit/",
+      pyodideUrl: "/pyodide/pyodide.js",
+      webRenderer: "auto",
+      fontFallbackBaseUrl: "assets/fonts/", // for Noto Emoji, use Google CDN
+      appPackageUrl: "app.tar.gz"
     }
+
+    flet.flutterAppLoaded = new Promise((resolve) => {
+      flet.flutterAppResolve = resolve;
+    });
+
+    flet.flutterAppLoaded.then((flutterApp) => {
+      console.log("Flutter app loaded");
+      if (flet.multiView) {
+        console.log(flutterApp.addView({
+          hostElement: document.querySelector('#view-1'),
+          initialData: {
+            greeting: 'Hello, world!',
+            randomValue: Math.floor(Math.random() * 100),
+          },
+          viewConstraints: {
+            //maxWidth: Infinity,
+            maxHeight: Infinity,
+            minHeight: 300,
+            minWidth: 620
+          }
+        }));
+        console.log(flutterApp.addView({
+          hostElement: document.querySelector('#view-2'),
+          initialData: {
+            bar: "baz"
+          },
+          viewConstraints: {
+            minWidth: 620,
+            //maxWidth: 320,
+            //minHeight: 400,
+            maxHeight: 400,
+          }
+        }));
+      }
+    });
   </script>
 
+  <!-- fletAppConfig -->
+
   <script src="python.js"></script>
 </head>
 
@@ -106,5 +135,10 @@
     <img src="icons/loading-animation.png" alt="Loading..." />
   </div>
   <script src="flutter_bootstrap.js" async></script>
+
+  <h1>View 1</h1>
+  <div id="view-1" style="display: flex; justify-content: center;"></div>
+  <h1>View 2</h1>
+  <div id="view-2"></div>
 </body>
 </html>

client/web/python.js

@@ -30,12 +30,12 @@ globalThis.jsConnect = async function(appId, args, dartOnMessage) {
 
     // initialize worker
     app.worker.postMessage({
-        pyodideUrl: globalThis.pyodideUrl ?? defaultPyodideUrl,
+        pyodideUrl: flet.noCdn ? flet.pyodideUrl : defaultPyodideUrl,
         args: args,
         documentUrl: _documentUrl,
-        appPackageUrl: globalThis.appPackageUrl,
-        micropipIncludePre: globalThis.micropipIncludePre,
-        pythonModuleName: globalThis.pythonModuleName
+        appPackageUrl: flet.appPackageUrl,
+        micropipIncludePre: flet.micropipIncludePre,
+        pythonModuleName: flet.pythonModuleName
     });
 
     await pythonInitialized;

packages/flet/lib/flet.dart

@@ -9,7 +9,6 @@ export 'src/flet_extension.dart';
 export 'src/flet_service.dart';
 export 'src/models/asset_source.dart';
 export 'src/models/control.dart';
-export 'src/models/page_args_model.dart';
 export 'src/models/page_size_view_model.dart';
 export 'src/utils.dart';
 export 'src/utils/alignment.dart';

packages/flet/lib/src/controls/alert_dialog.dart

@@ -15,7 +15,8 @@ import 'control_widget.dart';
 class AlertDialogControl extends StatefulWidget {
   final Control control;
 
-  const AlertDialogControl({super.key, required this.control});
+  AlertDialogControl({Key? key, required this.control})
+      : super(key: ValueKey("control_${control.id}"));
 
   @override
   State<AlertDialogControl> createState() => _AlertDialogControlState();

packages/flet/lib/src/controls/auto_complete.dart

@@ -20,10 +20,9 @@ class AutoCompleteControl extends StatelessWidget {
     var autoComplete = Autocomplete(
       optionsMaxHeight: control.getDouble("suggestions_max_height", 200)!,
       onSelected: (AutoCompleteSuggestion selection) {
-        control.triggerEvent("select", {
-          "selection": selection.toMap(),
-          "selection_index": suggestions.indexOf(selection)
-        });
+        control.updateProperties(
+            {"_selected_index": suggestions.indexOf(selection)});
+        control.triggerEvent("select", {"selection": selection.toMap()});
       },
       // optionsViewBuilder: optionsViewBuilder,
       optionsBuilder: (TextEditingValue textEditingValue) {

packages/flet/lib/src/controls/banner.dart

@@ -12,7 +12,7 @@ class BannerControl extends StatefulWidget {
   final Control control;
 
   BannerControl({Key? key, required this.control})
-      : super(key: ValueKey(control.id));
+      : super(key: ValueKey("control_${control.id}"));
 
   @override
   State<BannerControl> createState() => _BannerControlState();

packages/flet/lib/src/controls/bar_chart.dart

@@ -51,7 +51,8 @@ class BarChartEventData extends Equatable {
 class BarChartControl extends StatefulWidget {
   final Control control;
 
-  const BarChartControl({super.key, required this.control});
+  BarChartControl({Key? key, required this.control})
+      : super(key: ValueKey("control_${control.id}"));
 
   @override
   State<BarChartControl> createState() => _BarChartControlState();

packages/flet/lib/src/controls/bottom_sheet.dart

@@ -13,7 +13,8 @@ import '../widgets/error.dart';
 class BottomSheetControl extends StatefulWidget {
   final Control control;
 
-  const BottomSheetControl({super.key, required this.control});
+  BottomSheetControl({Key? key, required this.control})
+      : super(key: ValueKey("control_${control.id}"));
 
   @override
   State<BottomSheetControl> createState() => _BottomSheetControlState();

packages/flet/lib/src/controls/button.dart

@@ -4,10 +4,8 @@ import 'package:flutter/material.dart';
 class ButtonControl extends StatefulWidget {
   final Control control;
 
-  const ButtonControl({
-    super.key,
-    required this.control,
-  });
+  ButtonControl({Key? key, required this.control})
+      : super(key: ValueKey("control_${control.id}"));
 
   @override
   State<ButtonControl> createState() => _ButtonControlState();

packages/flet/lib/src/controls/canvas.dart

@@ -20,7 +20,8 @@ typedef CanvasControlOnPaintCallback = void Function(Size size);
 class CanvasControl extends StatefulWidget {
   final Control control;
 
-  const CanvasControl({super.key, required this.control});
+  CanvasControl({Key? key, required this.control})
+      : super(key: ValueKey("control_${control.id}"));
 
   @override
   State<CanvasControl> createState() => _CanvasControlState();

packages/flet/lib/src/controls/checkbox.dart

@@ -15,7 +15,8 @@ import 'list_tile.dart';
 class CheckboxControl extends StatefulWidget {
   final Control control;
 
-  const CheckboxControl({super.key, required this.control});
+  CheckboxControl({Key? key, required this.control})
+      : super(key: ValueKey("control_${control.id}"));
 
   @override
   State<CheckboxControl> createState() => _CheckboxControlState();

packages/flet/lib/src/controls/chip.dart

@@ -17,7 +17,8 @@ import 'base_controls.dart';
 class ChipControl extends StatefulWidget {
   final Control control;
 
-  const ChipControl({super.key, required this.control});
+  ChipControl({Key? key, required this.control})
+      : super(key: ValueKey("control_${control.id}"));
 
   @override
   State<ChipControl> createState() => _ChipControlState();