[DO NOT MERGE] WIP Flutter SDK docs

docs/_partials/icons/flutter.mdx

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 256 317">
+  {/* Primary kite shape */}
+
+  <polygon points="156 37 0 193 38 230 193 75" style={{ fill: "#54C5F8" }} />
+
+  {/* Inner lighter facet */}
+
+  <polygon points="156 149 83 222 121 260 193 187" style={{ fill: "#29B6F6" }} />
+
+  {/* Darker right-hand facet */}
+
+  <polygon points="193 187 121 260 159 297 230 222" style={{ fill: "#01579B" }} />
+
+  {/* Top accent */}
+
+  <polygon points="156 37 193 75 281 0 230 0" style={{ fill: "#29B6F6" }} />
+</svg>

docs/index.mdx

@@ -65,6 +65,12 @@ Find all the guides and resources you need to develop with Clerk.
 
   ---
 
+  - [Flutter (beta)](/docs/quickstarts/flutter)
+  - Use Clerk with Flutter to authenticate users in your Flutter application.
+  - <Include src="_partials/icons/flutter" />
+
+  ---
+
   - [iOS](/docs/quickstarts/ios)
   - Use the Clerk iOS SDK to authenticate users in your native Apple applications.
   - <Include src="_partials/icons/ios" />

docs/manifest.json

@@ -342,6 +342,30 @@
                 ]
               ]
             },
+            {
+              "title": "Flutter",
+              "hideTitle": true,
+              "sdk": ["flutter"],
+              "items": [
+                [
+                  {
+                    "title": "Getting started",
+                    "items": [
+                      [
+                        {
+                          "title": "Set up your Clerk account",
+                          "href": "/docs/quickstarts/setup-clerk"
+                        },
+                        {
+                          "title": "Quickstart",
+                          "href": "/docs/quickstarts/flutter"
+                        }
+                      ]
+                    ]
+                  }
+                ]
+              ]
+            },
             {
               "title": "Go",
               "hideTitle": true,

docs/manifest.schema.json

@@ -124,6 +124,7 @@
         "door",
         "elysia",
         "expressjs",
+        "flutter",
         "globe",
         "go",
         "home",
@@ -182,7 +183,8 @@
         "python",
         "js-backend",
         "sdk-development",
-        "community-sdk"
+        "community-sdk",
+        "flutter"
       ]
     }
   }

docs/quickstarts/flutter.mdx

@@ -0,0 +1,80 @@
+---
+title: Flutter Quickstart (beta)
+description: Add authentication and user management to your Flutter app with Clerk.
+---
+
+> [!WARNING]
+> The Flutter SDK is currently in beta. **It is not yet recommended for production use**.
+
+<TutorialHero
+  beforeYouStart={[
+    {
+      title: "Set up a Clerk application",
+      link: "/docs/quickstarts/setup-clerk",
+      icon: "clerk",
+    }
+  ]}
+/>
+
+<Include src="_partials/native-api-callout" />
+
+<Steps>
+  ## Create an Flutter project
+
+  To get started using Clerk with Flutter, create a new empty Flutter project using the `flutter` CLI or your favorite IDE Flutter extension.
+
+  ## Install the Clerk Flutter SDK
+
+  The Clerk Flutter SDK is distributed via pub.dev. To add the Clerk Flutter SDK to your project run `flutter pub add clerk_flutter` or manuall add `clerk_flutter` to your pubspec.yaml and run `flutter pub get`
+
+  ## Configure Clerk
+
+  - Import Clerk
+  - Wrap your app in the ClerkAuth widget and supply your publishable key to the ClerkAuthConfig widget.
+  - Use the ClerkErrorListener widget to catch Clerk errors
+  - Use the ClerkAuthBuilder widget to conditionally render content
+  - Use the ClerkAuthentication prebuilt UI widget to have users sign in and up
+  - Use the ClerkUserButton prebuilt UI widget to allow logged in users to manage their account
+
+  ```dart {{ filename: 'lib/main.dart' }}
+  import 'package:flutter/material.dart';
+  import 'package:clerk_flutter/clerk_flutter.dart';
+
+  void main() {
+    runApp(const MainApp());
+  }
+
+  class MainApp extends StatelessWidget {
+    const MainApp({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+      return ClerkAuth(
+        config: ClerkAuthConfig(publishableKey: 'pk_test...'),
+        child: MaterialApp(
+          theme: ThemeData.light(),
+          debugShowCheckedModeBanner: false,
+          home: Scaffold(
+            body: SafeArea(
+              child: ClerkErrorListener(
+                child: ClerkAuthBuilder(
+                  signedInBuilder: (context, authState) {
+                    return const ClerkUserButton();
+                  },
+                  signedOutBuilder: (context, authState) {
+                    return const ClerkAuthentication();
+                  },
+                ),
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+  }
+  ```
+
+  ## Create your first user
+
+  Run your project using `flutter run` or your favorite IDE. Click "Sign up" and authenticate to create your first user.
+</Steps>

docs/quickstarts/overview.mdx

@@ -62,6 +62,12 @@ description: See the getting started guides and tutorials.
 
   ---
 
+  - [Flutter (beta)](/docs/quickstarts/flutter)
+  - Use Clerk with Flutter to authenticate users in your Flutter application.
+  - <Include src="_partials/icons/flutter" />
+
+  ---
+
   - [iOS](/docs/quickstarts/ios)
   - Use the Clerk iOS SDK to authenticate users in your native Apple applications.
   - <Include src="_partials/icons/ios" />

scripts/lib/schemas.ts

@@ -25,6 +25,7 @@ export const VALID_SDKS = [
   'js-backend',
   'sdk-development',
   'community-sdk',
+  'flutter',
 ] as const
 
 export type SDK = (typeof VALID_SDKS)[number]