v1: Add --no-cdn option (full offline support) to flet build, flet run and flet publish (#5257)

* Include replaced controls to remove_controls

* Add --no-cdn and --no-wasm options to CLI

* Update pyproject_toml.py

* SafeArea conflicting props renaming

* AuthorizationService and stub for Pyodide

* Slider value is optional

* Fix Slider assertions

* fixed Gradient bug

* OutlinedButton: deleted `text` property

* --no-cdn finished

* Fix web job

* Fixed getWidgetStateProperty()

* Another fix of getWidgetStateProperty()

---------

Co-authored-by: InesaFitsner <inesa@appveyor.com>

Author: FeodorFitsner

.appveyor.yml

@@ -69,6 +69,7 @@ environment:
       job_group: build_flet
       job_depends_on: build_flet_package
       PYODIDE_URL: https://github.com/pyodide/pyodide/releases/download/0.27.5/pyodide-core-0.27.5.tar.bz2
+      PYODIDE_CDN_URL: https://cdn.jsdelivr.net/pyodide/v0.27.5/full
       APPVEYOR_BUILD_WORKER_IMAGE: ubuntu2004
 
     - job_name: Test Python 3.10
@@ -388,6 +389,8 @@ for:
       - ls "$(dirname "$(command -v flutter)")/cache/flutter_web_sdk/flutter_js"
       - cp "$(dirname "$(command -v flutter)")/cache/flutter_web_sdk/flutter_js/flutter.js.map" $flet_sdk_root/packages/flet-web/src/flet_web/web
       - curl -L $PYODIDE_URL | tar -xj -C "$flet_sdk_root/packages/flet-web/src/flet_web/web"
+      - curl -L $PYODIDE_CDN_URL/packaging-24.2-py3-none-any.whl -o "$flet_sdk_root/packages/flet-web/src/flet_web/web/pyodide/packaging-24.2-py3-none-any.whl"
+      - curl -L $PYODIDE_CDN_URL/micropip-0.8.0-py3-none-any.whl -o "$flet_sdk_root/packages/flet-web/src/flet_web/web/pyodide/micropip-0.8.0-py3-none-any.whl"
       - popd
       - tar -czvf client/build/flet-web.tar.gz -C client/build/web .
 
@@ -466,4 +469,4 @@ for:
       auth_token: $(GITHUB_TOKEN)
       release: $(APPVEYOR_REPO_TAG_NAME)
       on:
-        APPVEYOR_REPO_TAG: true
+        APPVEYOR_REPO_TAG: true

client/web/flutter_bootstrap.js

@@ -6,6 +6,9 @@ var config = {};
 if (webRenderer != "auto") {
     config.renderer = webRenderer;
 }
+if (globalThis.canvasKitBaseUrl) {
+    config.canvasKitBaseUrl = globalThis.canvasKitBaseUrl;
+}
 _flutter.loader.load({
     config: config,
     serviceWorkerSettings: {
@@ -22,4 +25,4 @@ _flutter.loader.load({
             loading.remove();
         }, 200);
     }
-});
+});

client/web/index.html

@@ -28,11 +28,21 @@
   <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";
+    }
+  </script>
 
   <script src="python.js"></script>
 </head>
@@ -97,4 +107,4 @@
   </div>
   <script src="flutter_bootstrap.js" async></script>
 </body>
-</html>
+</html>

client/web/python-worker.js

@@ -1,4 +1,5 @@
 self.pyodideUrl = null;
+self.appPackageUrl = null;
 self.micropipIncludePre = false;
 self.pythonModuleName = null;
 self.documentUrl = null;
@@ -10,6 +11,7 @@ self.initPyodide = async function () {
         importScripts(self.pyodideUrl);
         self.pyodide = await loadPyodide();
         self.pyodide.registerJsModule("flet_js", flet_js);
+        self.pyodide.globals.set("app_package_url", self.appPackageUrl);
         self.pyodide.globals.set("python_module_name", self.pythonModuleName);
         self.pyodide.globals.set("micropip_include_pre", self.micropipIncludePre);
         flet_js.documentUrl = documentUrl;
@@ -19,13 +21,19 @@ self.initPyodide = async function () {
         from pyodide.http import pyfetch
 
         py_args = flet_js.args.to_py() if flet_js.args else None
-        
+
+        if "app_package_url" in py_args:
+            app_package_url = py_args["app_package_url"]
+
+        if app_package_url is None:
+            app_package_url = "assets/app/app.zip"
+
         if "python_module_name" in py_args:
             python_module_name = py_args["python_module_name"]
-            
+
         if python_module_name is None:
             python_module_name = "main"
-        
+
         if "micropip_include_pre" in py_args:
             micropip_include_pre = py_args["micropip_include_pre"]
 
@@ -37,18 +45,18 @@ self.initPyodide = async function () {
 
         if "script" not in py_args:
             print("Downloading app archive")
-            response = await pyfetch("assets/app/app.zip")
+            response = await pyfetch(app_package_url)
             await response.unpack_archive()
         else:
             print("Saving script to a file")
             with open(f"{python_module_name}.py", "w") as f:
                 f.write(py_args["script"]);
-    
+
         pkgs_path = "__pypackages__"
         if os.path.exists(pkgs_path):
             print(f"Adding {pkgs_path} to sys.path")
             sys.path.insert(0, pkgs_path)
-    
+
         if os.path.exists("requirements.txt"):
             with open("requirements.txt", "r") as f:
                 deps = [line.rstrip() for line in f]
@@ -57,7 +65,7 @@ self.initPyodide = async function () {
 
         if "dependencies" in py_args:
             await micropip.install(py_args["dependencies"], pre=micropip_include_pre)
-    
+
         # Execute app
         runpy.run_module(python_module_name, run_name="__main__")
       `);
@@ -79,11 +87,12 @@ self.onmessage = async (event) => {
         self.pyodideUrl = event.data.pyodideUrl;
         self.flet_js.args = event.data.args;
         self.documentUrl = event.data.documentUrl;
+        self.appPackageUrl = event.data.appPackageUrl;
         self.micropipIncludePre = event.data.micropipIncludePre;
         self.pythonModuleName = event.data.pythonModuleName;
         await self.initPyodide();
     } else {
         // message
         flet_js.send(event.data);
     }
-};
+};

client/web/python.js

@@ -33,6 +33,7 @@ globalThis.jsConnect = async function(appId, args, dartOnMessage) {
         pyodideUrl: globalThis.pyodideUrl ?? defaultPyodideUrl,
         args: args,
         documentUrl: _documentUrl,
+        appPackageUrl: globalThis.appPackageUrl,
         micropipIncludePre: globalThis.micropipIncludePre,
         pythonModuleName: globalThis.pythonModuleName
     });
@@ -66,4 +67,4 @@ globalThis.jsDisconnect = async function(appId) {
         app.worker.onmessage = null;
         app.worker.onerror = null;
     }
-}
+}

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

@@ -17,10 +17,10 @@ class SafeAreaControl extends StatelessWidget {
     debugPrint("SafeArea build: ${control.id}");
 
     final safeArea = SafeArea(
-        left: control.getBool("left", true)!,
-        top: control.getBool("top", true)!,
-        right: control.getBool("right", true)!,
-        bottom: control.getBool("bottom", true)!,
+        left: control.getBool("avoid_intrusions_left", true)!,
+        top: control.getBool("avoid_intrusions_top", true)!,
+        right: control.getBool("avoid_intrusions_right", true)!,
+        bottom: control.getBool("avoid_intrusions_bottom", true)!,
         maintainBottomViewPadding:
             control.getBool("maintain_bottom_view_padding", false)!,
         minimum: control.getEdgeInsets("minimum_padding", EdgeInsets.zero)!,

packages/flet/lib/src/utils/gradient.dart

@@ -12,7 +12,7 @@ Gradient? parseGradient(dynamic value, ThemeData theme) {
   if (value == null) return null;
 
   String type = value["type"];
-  var colors = parseColors(theme, value["colors"]);
+  var colors = parseColors(value["colors"], theme);
   var stops = parseGradientStops(value["stops"]);
   var rotation = parseRotation(value["rotation"]);
   if (type == "linear") {
@@ -123,6 +123,7 @@ Color lerpGradient(List<Color> colors, List<double> stops, double t) {
   }
   return colors.last;
 }
+
 extension GradientParsers on Control {
   Gradient? getGradient(String propertyName, ThemeData theme) {
     return parseGradient(get(propertyName), theme);
@@ -145,4 +146,4 @@ extension GradientParsers on Control {
       [GradientRotation? defaultValue]) {
     return parseRotation(get(propertyName), defaultValue);
   }
-}
+}

packages/flet/lib/src/utils/material_state.dart

@@ -4,14 +4,22 @@ import 'package:flutter/material.dart';
 
 import '../models/control.dart';
 
-WidgetStateProperty<T?>? getWidgetStateProperty<T>(dynamic value,
-    T Function(dynamic) converterFromJson,
+WidgetStateProperty<T?>? getWidgetStateProperty<T>(
+    dynamic value, T Function(dynamic) converterFromJson,
     [T? defaultValue]) {
   if (value == null) return null;
   var j = value;
   if (j is! Map<dynamic, dynamic>) {
     j = {"default": j};
   }
+  if (j.containsKey("")) {
+    j["default"] = j.remove("");
+  }
+  if (!j.keys.every(
+      (k) => k == "default" || WidgetState.values.any((v) => v.name == k))) {
+    // wrap into another dict
+    j = {"default": j};
+  }
   return WidgetStateFromJSON(j, converterFromJson, defaultValue);
 }