Merge pull request #38 from gridaco/flutter-support-with-universal-tokenization

Flutter universal token support (1/3)

Author: softmarshmallow

docs/flutter-svg-support.md

@@ -0,0 +1,17 @@
+# Flutter does not have a SVG support.
+
+**Use `flutter_svg`**
+
+> Can't run on dartpad.
+
+```dart
+
+```
+
+**Use `Image.network()`**
+
+> Can run on dartpad, requires hosting within svg to png conversion.
+
+```dart
+
+```

editor/components/app-runner/app-runner.tsx

@@ -77,15 +77,12 @@ function DedicatedFrameworkRunner({
   switch (platform) {
     case "flutter":
       return (
-        <div>
-          <FlutterAppRunner
-            width="100%"
-            height="100%"
-            q={{
-              language: "dart",
-              src: src,
-            }}
-          />
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        >
           <button
             onClick={() => {
               const _name = "fluttercodefromdesigntocode";
@@ -108,6 +105,14 @@ function DedicatedFrameworkRunner({
           >
             open in console
           </button>
+          <FlutterAppRunner
+            width="100%"
+            height="100%"
+            q={{
+              language: "dart",
+              src: src,
+            }}
+          />
         </div>
       );
     case "react":

editor/pages/figma/to-flutter.tsx

@@ -1,5 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { designTo } from "@designto/code";
+import styled from "@emotion/styled";
+import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
+import {
+  ImageRepository,
+  MainImageRepository,
+} from "@design-sdk/core/assets-repository";
+import { output } from "@designto/config";
+import { tokenize } from "@designto/token";
 import { utils_dart } from "../../utils";
 import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
 import { LayerHierarchy } from "../../components/editor-hierarchy";
@@ -8,15 +16,8 @@ import {
   WorkspaceContentPanelGridLayout,
 } from "../../layout/panel";
 import { PreviewAndRunPanel } from "../../components/preview-and-run";
-import styled from "@emotion/styled";
 import { useDesign } from "../../query-hooks";
 import { MonacoEditor } from "../../components/code-editor";
-import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
-import {
-  ImageRepository,
-  MainImageRepository,
-} from "@design-sdk/core/assets-repository";
-import { output } from "@designto/config";
 import LoadingLayout from "../../layout/loading-overlay";
 
 export default function FigmaToFlutterPage() {
@@ -26,7 +27,6 @@ export default function FigmaToFlutterPage() {
   useEffect(() => {
     if (design) {
       const { reflect, url, node, file } = design;
-      const { id, name } = reflect;
 
       // ------------------------------------------------------------
       // other platforms are not supported yet
@@ -39,13 +39,10 @@ export default function FigmaToFlutterPage() {
         )
       );
       // ------------------------------------------------------------
-
       designTo
         .flutter({
           input: {
-            id: id,
-            name: name,
-            design: reflect,
+            widget: tokenize(reflect),
           },
           asset_config: { asset_repository: MainImageRepository.instance },
         })

editor/pages/to-code/index.tsx

@@ -65,7 +65,7 @@ export default function DesignToCodeUniversalPage() {
     return <LoadingLayout />;
   }
 
-  const { code, name: componentName } = result;
+  const { code, scaffold, name: componentName } = result;
 
   const runner_platform = get_runner_platform(framework_config);
   return (
@@ -84,7 +84,7 @@ export default function DesignToCodeUniversalPage() {
             <PreviewAndRunPanel
               key={design.url ?? design.reflect?.id}
               config={{
-                src: code.raw,
+                src: scaffold.raw,
                 platform: runner_platform,
                 componentName: componentName,
                 sceneSize: {

packages/builder-config/framework-flutter/index.ts

@@ -1 +1,3 @@
-export interface FlutterComponentOutput {}
+import { ComponentOutput } from "../output";
+
+export interface FlutterComponentOutput extends ComponentOutput {}

packages/design-sdk

@@ -10,7 +10,7 @@
         "@designto/web": "0.0.0",
         "@design-sdk/universal": "0.0.0",
         "@reflect-ui/detection": "0.1.1",
-        "@flutter-builder/flutter": "^2.5.0-f2"
+        "@flutter-builder/flutter": "^2.5.0-f3"
     },
     "files": [
         "README.md",

packages/designto-code/package.json

@@ -4,7 +4,6 @@ import { Widget } from "@reflect-ui/core";
 import * as toreact from "@designto/react";
 import * as tovanilla from "@designto/vanilla";
 import * as toflutter from "@designto/flutter";
-import { composeAppWithHome } from "@flutter-builder/flutter";
 import {
   fetch_all_assets,
   finalize_temporary_assets_with_prefixed_static_string_keys__dangerously,
@@ -27,14 +26,14 @@ export async function designToCode({
   asset_config: AssetsConfig;
 }): Promise<output.ICodeOutput> {
   const token = tokenize(input.design);
-
+  const _tokenized_widget_input = { widget: token };
   switch (framework.framework) {
     case "vanilla":
-      return designToVanilla({ input: { widget: token }, asset_config });
+      return designToVanilla({ input: _tokenized_widget_input, asset_config });
     case "react":
-      return designToReact({ input: { widget: token }, asset_config });
+      return designToReact({ input: _tokenized_widget_input, asset_config });
     case "flutter":
-      return designToFlutter({ input, asset_config });
+      return designToFlutter({ input: _tokenized_widget_input, asset_config });
   }
   throw `The framework "${framework}" is not supported at this point.`;
   return;
@@ -78,38 +77,31 @@ export async function designToFlutter({
   input,
   asset_config,
 }: {
-  input: input.IDesignInput;
+  input: { widget: Widget };
   asset_config?: AssetsConfig;
 }): Promise<output.ICodeOutput> {
   await Promise.resolve();
 
-  const flutterAppBuild = toflutter.buildApp(input.design);
-  const widget = flutterAppBuild?.widget;
-  const app =
-    widget &&
-    toflutter.makeApp({
-      widget: widget,
-      scrollable: flutterAppBuild.scrollable,
-    });
+  const flutterwidget = toflutter.buildFlutterWidget(input.widget);
+  const flutterapp = toflutter.buildFlutterApp(flutterwidget);
 
-  let widgetCode = widget?.build()?.finalize();
-  let rootAppCode = composeAppWithHome(app);
   // ------------------------------------------------------------------------
   // finilize temporary assets
   // this should be placed somewhere else
   if (asset_config?.asset_repository && !asset_config.skip_asset_replacement) {
     const assets = await fetch_all_assets(asset_config?.asset_repository);
-    rootAppCode = dangerous_temporary_asset_replacer(rootAppCode, assets);
-    widgetCode = dangerous_temporary_asset_replacer(widgetCode, assets);
+    flutterapp.scaffold.raw = dangerous_temporary_asset_replacer(
+      flutterapp.scaffold.raw,
+      assets
+    );
+    flutterapp.code.raw = dangerous_temporary_asset_replacer(
+      flutterapp.code.raw,
+      assets
+    );
   }
   // ------------------------------------------------------------------------
 
-  return {
-    code: { raw: widgetCode },
-    scaffold: { raw: rootAppCode },
-    id: input.id,
-    name: input.name,
-  };
+  return flutterapp;
 }
 
 export function designToVue(input: input.IDesignInput): output.ICodeOutput {

packages/designto-code/universal/design-to-code.ts

@@ -1,4 +1,11 @@
 import * as flutter from "@flutter-builder/flutter";
+export function makeSafelyAsList<T>(maybeList: Array<T> | T): Array<T> {
+  if (Array.isArray(maybeList)) {
+    return maybeList;
+  } else {
+    return [maybeList];
+  }
+}
 
 export function makeSaflyAsSingle(
   maybeWidget: Array<flutter.Widget> | flutter.Widget

packages/designto-flutter/utils/make-as-safe-single.ts renamed to packages/designto-flutter/_utils/array-utils.ts

@@ -0,0 +1,3 @@
+export * from "./round-double";
+export * from "./array-utils";
+export * from "./size-utils";

packages/designto-flutter/_utils/index.ts

@@ -0,0 +1,14 @@
+# Image.memory handling
+
+Unlike web, using base64 encoded image string requires extra steps on flutter
+
+```dart
+import 'dart:convert';
+import 'package:flutter/widgets.dart';
+
+Image.memory(base64Decode(base64String));
+```
+
+### References
+
+- https://stackoverflow.com/questions/46145472/how-to-convert-base64-string-into-image-with-flutter

packages/designto-flutter/convert/double.convert.ts renamed to packages/designto-flutter/_utils/round-double.ts

@@ -0,0 +1,3 @@
+# Flutter svg support - [Learn more at docs](../../../../docs/flutter-svg-support.md)
+
+- https://github.com/lovell/sharp

packages/designto-flutter/convert/size.convert.ts renamed to packages/designto-flutter/_utils/size-utils.ts

@@ -0,0 +1,12 @@
+import { VectorWidget } from "@reflect-ui/core";
+import * as flutter from "@flutter-builder/flutter";
+
+/**
+ * @deprecated - not implemented
+ * @param vector
+ */
+export function flutter_handle_svg_vector_as_bitmap_converted(
+  vector: VectorWidget
+): flutter.Widget {
+  throw `svg to png conversion is not supported yet.`;
+}

packages/designto-flutter/case-handling/handle-flutter-data-image/README.md

@@ -0,0 +1,126 @@
+# Nested stack in flutter
+
+Nested stack (stack under positioned under stack) requires width and height.
+This,
+
+```dart
+Stack(
+  children: [
+    Positioned(
+      left: 795,
+      top: 163,
+      child: Stack(
+        children: [
+          Positioned(
+            left: 0,
+            top: 83,
+            child: Text(
+              "BeoPlay S3 draws heavily on geometry as a design reference. But also, it is reminiscent from the lines of two shapes embracing each other.",
+              style: TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.w400,
+                fontFamily: "Roboto",
+              ),
+            ),
+          ),
+          Positioned(
+            left: 0,
+            top: 23,
+            child: Text(
+              "B.play Homeaaaa Speaker ",
+              style: TextStyle(
+                fontSize: 36,
+                fontWeight: FontWeight.w700,
+                fontFamily: "Poppins",
+              ),
+            ),
+          ),
+          Positioned(
+            left: 0,
+            top: 0,
+            child: Text(
+              "SPEAKERS",
+              style: TextStyle(
+                fontSize: 14,
+                fontWeight: FontWeight.w500,
+                fontFamily: "Poppins",
+              ),
+            ),
+          ),
+
+          /// stack requires empty non positioned widget to work properly. refer: https://github.com/flutter/flutter/issues/49631#issuecomment-582090992
+          Container(),
+        ],
+      ),
+    ),
+
+    /// stack requires empty non positioned widget to work properly. refer: https://github.com/flutter/flutter/issues/49631#issuecomment-582090992
+    Container(),
+  ],
+);
+```
+
+Tobe
+
+```dart
+Stack(
+  children: [
+    Positioned(
+      left: 795,
+      top: 163,
+      child: Container(
+          width: MediaQuery.of(context).width,  /// <-----------
+          height: MediaQuery.of(context).height, /// <-----------
+          child: Stack(
+            children: [
+            Positioned(
+                left: 0,
+                top: 83,
+                child: Text(
+                "BeoPlay S3 draws heavily on geometry as a design reference. But also, it is reminiscent from the lines of two shapes embracing each other.",
+                style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.w400,
+                    fontFamily: "Roboto",
+                ),
+                ),
+            ),
+            Positioned(
+                left: 0,
+                top: 23,
+                child: Text(
+                "B.play Homeaaaa Speaker ",
+                style: TextStyle(
+                    fontSize: 36,
+                    fontWeight: FontWeight.w700,
+                    fontFamily: "Poppins",
+                ),
+                ),
+            ),
+            Positioned(
+                left: 0,
+                top: 0,
+                child: Text(
+                "SPEAKERS",
+                style: TextStyle(
+                    fontSize: 14,
+                    fontWeight: FontWeight.w500,
+                    fontFamily: "Poppins",
+                ),
+                ),
+            ),
+
+            /// stack requires empty non positioned widget to work properly. refer: https://github.com/flutter/flutter/issues/49631#issuecomment-582090992
+            Container(),
+            ],
+        ),
+      ),
+    ),
+
+    /// stack requires empty non positioned widget to work properly. refer: https://github.com/flutter/flutter/issues/49631#issuecomment-582090992
+    Container(),
+  ],
+);
+```
+
+- https://stackoverflow.com/a/52936983/5463235