Use Supabase with Flutter

<$Partial path="quickstart_db_setup.mdx" />

<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 name=Terminal
  flutter create my_app
  ```

</StepHikeCompact.Code>

<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 name=pubspec.yaml
  supabase_flutter: ^2.0.0
  ```

</StepHikeCompact.Code>

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

  Open `lib/main.dart` and edit the main function to initialize Supabase using your project URL and publishable key:

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


</StepHikeCompact.Details>

<StepHikeCompact.Code>

  ```dart name=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_PUBLISHABLE_KEY',
    );
    runApp(MyApp());
  }
  ```

  <$Partial path="api_settings_steps.mdx" variables={{ "framework": "flutter", "tab": "mobiles" }} />

</StepHikeCompact.Code>

<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 name=lib/main.dart
  class MyApp extends StatelessWidget {
    const MyApp({super.key});

    @override
    Widget build(BuildContext context) {
      return const MaterialApp(
        title: 'Instruments',
        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('instruments')
        .select();

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

</StepHikeCompact.Code>

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 name=Terminal
  flutter run
  ```

</StepHikeCompact.Code>

<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>