fix: flutter web analytics onboarding (#26687)

frontend/src/scenes/onboarding/sdks/sdk-install-instructions/flutter.tsx

@@ -189,3 +189,26 @@ export function SDKInstallFlutterInstructions(props: FlutterSetupProps): JSX.Ele
         </>
     )
 }
+
+export function SDKInstallFlutterTrackScreenInstructions(): JSX.Element {
+    return (
+        <>
+            <p>
+                With the <Link to="https://posthog.com/docs/libraries/flutter#example">PosthogObserver</Link> Observer,
+                PostHog will try to record all screen changes automatically.
+            </p>
+            <p>
+                If you want to manually send a new screen capture event, use the <code>screen</code> function.
+            </p>
+            <CodeSnippet language={Language.Dart}>{`import 'package:posthog_flutter/posthog_flutter.dart';
+
+await Posthog().screen(
+    screenName: 'Dashboard',
+    properties: {
+      'background': 'blue',
+      'hero': 'superhog'
+    });
+`}</CodeSnippet>
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/session-replay/SessionReplaySDKInstructions.tsx

@@ -12,6 +12,7 @@ import {
     AngularInstructions,
     AstroInstructions,
     BubbleInstructions,
+    FlutterInstructions,
     FramerInstructions,
     HTMLSnippetInstructions,
     iOSInstructions,
@@ -20,12 +21,11 @@ import {
     NuxtJSInstructions,
     ReactInstructions,
     RemixInstructions,
+    RNInstructions,
     SvelteInstructions,
     VueInstructions,
     WebflowInstructions,
 } from '.'
-import { FlutterInstructions } from './flutter'
-import { RNInstructions } from './react-native'
 
 export const SessionReplaySDKInstructions: SDKInstructionsMap = {
     [SDKKey.JS_WEB]: JSWebInstructions,

frontend/src/scenes/onboarding/sdks/session-replay/index.tsx

@@ -2,13 +2,15 @@ export * from './android'
 export * from './angular'
 export * from './astro'
 export * from './bubble'
+export * from './flutter'
 export * from './framer'
 export * from './html-snippet'
 export * from './ios'
 export * from './js-web'
 export * from './next-js'
 export * from './nuxt'
 export * from './react'
+export * from './react-native'
 export * from './remix'
 export * from './svelte'
 export * from './vue'

frontend/src/scenes/onboarding/sdks/web-analytics/WebAnalyticsSDKInstructions.tsx

@@ -1,11 +1,11 @@
 import { SDKInstructionsMap, SDKKey } from '~/types'
 
-import { FlutterInstructions } from '../session-replay/flutter'
 import {
     AndroidInstructions,
     AngularInstructions,
     AstroInstructions,
     BubbleInstructions,
+    FlutterInstructions,
     FramerInstructions,
     HTMLSnippetInstructions,
     iOSInstructions,

frontend/src/scenes/onboarding/sdks/web-analytics/flutter.tsx

@@ -0,0 +1,13 @@
+import { WebAnalyticsMobileFinalSteps } from 'scenes/onboarding/sdks/web-analytics/FinalSteps'
+
+import { SDKInstallFlutterInstructions, SDKInstallFlutterTrackScreenInstructions } from '../sdk-install-instructions'
+
+export function FlutterInstructions(): JSX.Element {
+    return (
+        <>
+            <SDKInstallFlutterInstructions includeReplay={false} />
+            <WebAnalyticsMobileFinalSteps />
+            <SDKInstallFlutterTrackScreenInstructions />
+        </>
+    )
+}

frontend/src/scenes/onboarding/sdks/web-analytics/index.tsx

@@ -2,6 +2,7 @@ export * from './android'
 export * from './angular'
 export * from './astro'
 export * from './bubble'
+export * from './flutter'
 export * from './framer'
 export * from './html-snippet'
 export * from './ios'