Flutter Quickstart

Enable Native API

In the Clerk Dashboard, navigate to the Native applications page and ensure that the Native API is enabled. This is required to integrate Clerk in your native application.

Create a new Flutter app

1. If you don't already have a Flutter app, first follow the Create a new Flutter app guide in the Flutter Docs. This will guide you step-by-step on how to create a Flutter app in your preferred development environment.

2. Add clerk_flutter and clerk_auth to your Flutter app.

   flutter pub add clerk_flutter clerk_auth

3. The Clerk packages can now be imported into your Flutter app.

Configure the AndroidManifest.xml file

In android/app/src/main/AndroidManifest.xml, inside the root <manifest> tag, add the following line to enable internet permission when running your Flutter app on Android.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/>
    ...
</manifest>

Wire up ClerkAuth

ClerkAuth is the root control widget that initializes the Clerk authentication system. Wrap your MaterialApp with it and pass your publishable key via ClerkAuthConfig.

The following example demonstrates how to wrap your MaterialApp with ClerkAuth and use ClerkAuthBuilder to render different content depending on whether a user is signed in or out. ClerkAuthentication is passed as the signedOutBuilder to display Clerk's prebuilt sign-in and sign-up UI.

import 'package:clerk_flutter/clerk_flutter.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    ClerkAuth(
      config: ClerkAuthConfig(publishableKey: 'YOUR_PUBLISHABLE_KEY'),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: const Text('My App')),
          body: SafeArea(
            child: ClerkErrorListener(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: ClerkAuthBuilder(
                  signedInBuilder: (context, authState) {
                    return const Center(child: Text('You are signed in!'));
                  },
                  signedOutBuilder: (context, authState) {
                    return const ClerkAuthentication();
                  },
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Run your application

Now run your Flutter app.

Create your first user

Once the app launches successfully, the ClerkAuth widget opens, allowing you to sign up or sign in to create your first user.