supabase/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx

---
title: 'Use Supabase with Flutter'
subtitle: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.'
breadcrumb: 'Framework Quickstarts'
hideToc: true
---

<StepHikeCompact>

  <StepHikeCompact.Step step={1}>
    <StepHikeCompact.Details title="Set up a Supabase project with sample data">

    [Create a new project](https://supabase.com/dashboard) in the Supabase Dashboard.

    After your project is ready, create a table in your Supabase database using the [SQL Editor](https://supabase.com/dashboard/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data.

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

     ```sql SQL_EDITOR
      -- Create the table
      CREATE TABLE countries (
      id SERIAL PRIMARY KEY,
      name VARCHAR(255) NOT NULL
      );
      -- Insert some sample data into the table
      INSERT INTO countries (name) VALUES ('United States');
      INSERT INTO countries (name) VALUES ('Canada');
      INSERT INTO countries (name) VALUES ('Mexico');
      ````

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={2}>

    <StepHikeCompact.Details title="Create a Flutter app">

    Create a Flutter app using the `flutter create` command. You can skip this step if you already have a working app.

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      ```bash Terminal
      flutter create my_app
      ```

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={3}>

    <StepHikeCompact.Details title="Install the Supabase client library">

      The fastest way to get started is to use the [`supabase_flutter`](https://pub.dev/packages/supabase_flutter) client library which provides a convenient interface for working with Supabase from a Flutter app.

      Open the `pubspec.yaml` file inside your Flutter app and add `supabase_flutter` as a dependency.

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      ```yaml pubspec.yaml
      supabase_flutter: ^2.0.0
      ```

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={4}>

    <StepHikeCompact.Details title="Initialize the Supabase client">

      Open `lib/main.dart` and edit the main function to initialize Supabase using your project URL and public API (anon) key:

      <ProjectConfigVariables variable="url" />
      <ProjectConfigVariables variable="anonKey" />

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      ```dart lib/main.dart
      import 'package:supabase_flutter/supabase_flutter.dart';

      Future<void> main() async {
        WidgetsFlutterBinding.ensureInitialized();

        await Supabase.initialize(
          url: 'YOUR_SUPABASE_URL',
          anonKey: 'YOUR_SUPABASE_ANON_KEY',
        );
        runApp(MyApp());
      }
      ```

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={5}>

    <StepHikeCompact.Details title="Query data from the app">

      Use a `FutureBuilder` to fetch the data when the home page loads and display the query result in a `ListView`.

      Replace the default `MyApp` and `MyHomePage` classes with the following code.

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      ```dart lib/main.dart
      class MyApp extends StatelessWidget {
        const MyApp({Key? key}) : super(key: key);

        @override
        Widget build(BuildContext context) {
          return const MaterialApp(
            title: 'Countries',
            home: HomePage(),
          );
        }
      }

      class HomePage extends StatefulWidget {
        const HomePage({super.key});

        @override
        State<HomePage> createState() => _HomePageState();
      }

      class _HomePageState extends State<HomePage> {
        final _future = Supabase.instance.client
            .from('countries')
            .select();

        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body: FutureBuilder(
              future: _future,
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  return const Center(child: CircularProgressIndicator());
                }
                final countries = snapshot.data!;
                return ListView.builder(
                  itemCount: countries.length,
                  itemBuilder: ((context, index) {
                    final country = countries[index];
                    return ListTile(
                      title: Text(country['name']),
                    );
                  }),
                );
              },
            ),
          );
        }
      }
      ```

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

  <StepHikeCompact.Step step={6}>
    <StepHikeCompact.Details title="Start the app">

    Run your app on a platform of your choosing! By default an app should launch in your web browser.

    Note that `supabase_flutter` is compatible with web, iOS, Android, macOS, and Windows apps.
    Running the app on MacOS requires additional configuration to [set the entitlements](https://docs.flutter.dev/development/platform-integration/macos/building#setting-up-entitlements).

    </StepHikeCompact.Details>

    <StepHikeCompact.Code>

      ```bash Terminal
      flutter run
      ```

    </StepHikeCompact.Code>

  </StepHikeCompact.Step>

</StepHikeCompact>

## Going to production

### Android

In production, your Android app needs explicit permission to use the internet connection on the user's device which is required to communicate with Supabase APIs.
To do this, add the following line to the `android/app/src/main/AndroidManifest.xml` file.

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Required to fetch data from the internet. -->
  <uses-permission android:name="android.permission.INTERNET" />
  <!-- ... -->
</manifest>
```