Merge pull request #2199 from appwrite/fix-flutter-onboarding-guide

Author: ItzNotABug

src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte

@@ -26,6 +26,7 @@
     import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
     import { isCloud } from '$lib/system';
+    import { project } from '../../store';
 
     let showExitModal = false;
     let isPlatformCreated = false;
@@ -36,11 +37,15 @@
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-flutter\ncd starter-for-flutter\n';
 
+    const baseConfig = `class Environment {
+  static const String appwriteProjectId = '${projectId}';
+  static const String appwriteProjectName = '${$project.name}';`;
+
     const updateConfigCode = isCloud
-        ? `static const String APPWRITE_PROJECT_ID = "${projectId}"`
-        : `static const String APPWRITE_PROJECT_ID = "${projectId}"
-static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"
-        `;
+        ? `${baseConfig}\n}`
+        : `${baseConfig}
+  static const String appwriteEndpoint = '${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}';
+}`;
 
     export let platform: PlatformType = PlatformType.Flutterandroid;
 
@@ -276,16 +281,18 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
                     </div>
 
                     <Typography.Text variant="m-500"
-                        >2. Open the file <InlineCode size="s" code="lib/constants/appwrite.dart" />
-                        and update the configuration settings.</Typography.Text>
+                        >2. Replace <InlineCode size="s" code="lib/config/environment.dart" />
+                        to reflect the values below:</Typography.Text>
 
                     <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
                     <div class="pink2-code-margin-fix">
                         <Code lang="dart" lineNumbers code={updateConfigCode} />
                     </div>
 
                     <Typography.Text variant="m-500"
-                        >3. Run the app on a connected device or simulator, then click the <InlineCode
+                        >3. Run the app on a connected device or simulator using <InlineCode
+                            size="s"
+                            code="flutter run -d [device_name]" />, then click the <InlineCode
                             size="s"
                             code="Send a ping" /> button to verify the setup.</Typography.Text>
                 </Layout.Stack>

src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte

@@ -128,7 +128,15 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
             smallIcon: IconAngular,
             portNumber: 4200,
             runCommand: 'npm run start',
-            updateConfigCode: `appwriteEndpoint: '${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}',\nappwriteProjectId: '${projectId}',\nappwriteProjectName: '${$project.name}'`
+            updateConfigCode: `export const environment: {
+  appwriteEndpoint: string;
+  appwriteProjectId: string;
+  appwriteProjectName: string;
+} = {
+  appwriteEndpoint: '${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}',
+  appwriteProjectId: '${projectId}',
+  appwriteProjectName: '${$project.name}'
+};`
         },
         {
             key: 'js',
@@ -290,7 +298,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
 
                     {#if selectedFramework.key === 'angular'}
                         <Typography.Text variant="m-500"
-                            >2. Change <InlineCode
+                            >2. Replace <InlineCode
                                 size="s"
                                 code="src/environments/environment.ts" />
                             to reflect the values below:</Typography.Text>
@@ -303,7 +311,10 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
 
                     <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
                     <div class="pink2-code-margin-fix">
-                        <Code lang="dotenv" lineNumbers code={selectedFramework.updateConfigCode} />
+                        <Code
+                            lang={selectedFramework.key === 'angular' ? 'ts' : 'dotenv'}
+                            lineNumbers
+                            code={selectedFramework.updateConfigCode} />
                     </div>
 
                     <Typography.Text variant="m-500"