From 6da341e383bd0c04d597dc6291547feab7f3a47e Mon Sep 17 00:00:00 2001
From: kkk123321 <neverdie998@163.com>
Date: Mon, 26 Feb 2024 09:54:25 +0000
Subject: [PATCH] add flutter template

---
 frontend/src/App.tsx       | 199 ++++++++++++++++++++-----------------
 frontend/src/lib/stacks.ts |   1 -
 frontend/src/types.ts      |   1 +
 3 files changed, 107 insertions(+), 94 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3f7a025..ed6a105 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -47,6 +47,8 @@ function App() {
   const [updateInstruction, setUpdateInstruction] = useState("");
   const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false);
 
+
+
   // Settings
   const [settings, setSettings] = usePersistedState<Settings>(
     {
@@ -348,105 +350,105 @@ function App() {
 
           {(appState === AppState.CODING ||
             appState === AppState.CODE_READY) && (
-            <>
-              {/* Show code preview only when coding */}
-              {appState === AppState.CODING && (
-                <div className="flex flex-col">
-                  <div className="flex items-center gap-x-1">
-                    <Spinner />
-                    {executionConsole.slice(-1)[0]}
-                  </div>
-                  <div className="flex mt-4 w-full">
-                    <Button
-                      onClick={cancelCodeGeneration}
-                      className="w-full dark:text-white dark:bg-gray-700"
-                    >
-                      Cancel
-                    </Button>
-                  </div>
-                  <CodePreview code={generatedCode} />
-                </div>
-              )}
-
-              {appState === AppState.CODE_READY && (
-                <div>
-                  <div className="grid w-full gap-2">
-                    <Textarea
-                      placeholder="Tell the AI what to change..."
-                      onChange={(e) => setUpdateInstruction(e.target.value)}
-                      value={updateInstruction}
-                    />
-                    <div className="flex justify-between items-center gap-x-2">
-                      <div className="font-500 text-xs text-slate-700 dark:text-white">
-                        Include screenshot of current version?
-                      </div>
-                      <Switch
-                        checked={shouldIncludeResultImage}
-                        onCheckedChange={setShouldIncludeResultImage}
-                        className="dark:bg-gray-700"
-                      />
-                    </div>
-                    <Button
-                      onClick={doUpdate}
-                      className="dark:text-white dark:bg-gray-700"
-                    >
-                      Update
-                    </Button>
-                  </div>
-                  <div className="flex items-center gap-x-2 mt-2">
-                    <Button
-                      onClick={downloadCode}
-                      className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
-                    >
-                      <FaDownload /> Download
-                    </Button>
-                    <Button
-                      onClick={reset}
-                      className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
-                    >
-                      <FaUndo />
-                      Reset
-                    </Button>
-                  </div>
-                </div>
-              )}
-
-              {/* Reference image display */}
-              <div className="flex gap-x-2 mt-2">
-                {referenceImages.length > 0 && (
+              <>
+                {/* Show code preview only when coding */}
+                {appState === AppState.CODING && (
                   <div className="flex flex-col">
-                    <div
-                      className={classNames({
-                        "scanning relative": appState === AppState.CODING,
-                      })}
-                    >
-                      <img
-                        className="w-[340px] border border-gray-200 rounded-md"
-                        src={referenceImages[0]}
-                        alt="Reference"
-                      />
+                    <div className="flex items-center gap-x-1">
+                      <Spinner />
+                      {executionConsole.slice(-1)[0]}
                     </div>
-                    <div className="text-gray-400 uppercase text-sm text-center mt-1">
-                      Original Screenshot
+                    <div className="flex mt-4 w-full">
+                      <Button
+                        onClick={cancelCodeGeneration}
+                        className="w-full dark:text-white dark:bg-gray-700"
+                      >
+                        Cancel
+                      </Button>
+                    </div>
+                    <CodePreview code={generatedCode} />
+                  </div>
+                )}
+
+                {appState === AppState.CODE_READY && (
+                  <div>
+                    <div className="grid w-full gap-2">
+                      <Textarea
+                        placeholder="Tell the AI what to change..."
+                        onChange={(e) => setUpdateInstruction(e.target.value)}
+                        value={updateInstruction}
+                      />
+                      <div className="flex justify-between items-center gap-x-2">
+                        <div className="font-500 text-xs text-slate-700 dark:text-white">
+                          Include screenshot of current version?
+                        </div>
+                        <Switch
+                          checked={shouldIncludeResultImage}
+                          onCheckedChange={setShouldIncludeResultImage}
+                          className="dark:bg-gray-700"
+                        />
+                      </div>
+                      <Button
+                        onClick={doUpdate}
+                        className="dark:text-white dark:bg-gray-700"
+                      >
+                        Update
+                      </Button>
+                    </div>
+                    <div className="flex items-center gap-x-2 mt-2">
+                      <Button
+                        onClick={downloadCode}
+                        className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
+                      >
+                        <FaDownload /> Download
+                      </Button>
+                      <Button
+                        onClick={reset}
+                        className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
+                      >
+                        <FaUndo />
+                        Reset
+                      </Button>
                     </div>
                   </div>
                 )}
-                <div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
-                  <h2 className="text-lg mb-4 border-b border-gray-800">
-                    Console
-                  </h2>
-                  {executionConsole.map((line, index) => (
-                    <div
-                      key={index}
-                      className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
-                    >
-                      {line}
+
+                {/* Reference image display */}
+                <div className="flex gap-x-2 mt-2">
+                  {referenceImages.length > 0 && (
+                    <div className="flex flex-col">
+                      <div
+                        className={classNames({
+                          "scanning relative": appState === AppState.CODING,
+                        })}
+                      >
+                        <img
+                          className="w-[340px] border border-gray-200 rounded-md"
+                          src={referenceImages[0]}
+                          alt="Reference"
+                        />
+                      </div>
+                      <div className="text-gray-400 uppercase text-sm text-center mt-1">
+                        Original Screenshot
+                      </div>
                     </div>
-                  ))}
+                  )}
+                  <div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
+                    <h2 className="text-lg mb-4 border-b border-gray-800">
+                      Console
+                    </h2>
+                    {executionConsole.map((line, index) => (
+                      <div
+                        key={index}
+                        className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
+                      >
+                        {line}
+                      </div>
+                    ))}
+                  </div>
                 </div>
-              </div>
-            </>
-          )}
+              </>
+            )}
           {
             <HistoryDisplay
               history={appHistory}
@@ -479,11 +481,12 @@ function App() {
           </div>
         )}
 
-        {(appState === AppState.CODING || appState === AppState.CODE_READY) && (
+        {(appState === AppState.CODING || appState === AppState.CODE_READY) && settings.generatedCodeConfig != Stack.FLUTTER && (
           <div className="ml-4">
             <Tabs defaultValue="desktop">
               <div className="flex justify-end mr-8 mb-4">
                 <TabsList>
+
                   <TabsTrigger value="desktop" className="flex gap-x-2">
                     <FaDesktop /> Desktop
                   </TabsTrigger>
@@ -512,6 +515,16 @@ function App() {
             </Tabs>
           </div>
         )}
+
+        {(appState === AppState.CODING || appState === AppState.CODE_READY) && settings.generatedCodeConfig === Stack.FLUTTER && (
+          <div className="ml-4">
+            <CodeTab
+                  code={generatedCode}
+                  setCode={setGeneratedCode}
+                  settings={settings}
+                />
+          </div>
+        )}
       </main>
     </div>
   );
diff --git a/frontend/src/lib/stacks.ts b/frontend/src/lib/stacks.ts
index f3d7a69..726d11b 100644
--- a/frontend/src/lib/stacks.ts
+++ b/frontend/src/lib/stacks.ts
@@ -6,7 +6,6 @@ export enum Stack {
   VUE_TAILWIND = "vue_tailwind",
   VUE_CSS = "vue_css",
   IONIC_TAILWIND = "ionic_tailwind",
-  
   SVG = "svg",
   FLUTTER = "flutter",
 }
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 4e2c2fa..1d4da8e 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -21,6 +21,7 @@ export enum AppState {
   INITIAL = "INITIAL",
   CODING = "CODING",
   CODE_READY = "CODE_READY",
+  CODE_READY_NO_PREVIEW = "CODE_READY_NO_PREVIEW",
 }
 
 export interface CodeGenerationParams {