Use Supabase with Flutter

Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.

Set up a Supabase project with sample data

Create a new project in the Supabase Dashboard.

After your project is ready, create a table in your Supabase database using the SQL Editor in the Dashboard. Use the following SQL statement to create a countries table with some sample data.

 -- 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');

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.

1flutter create my_app

Install the Supabase client library

The fastest way to get started is to use the 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.

supabase_flutter: ^1.6.2

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.

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());
}

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.

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<List<Map<String, dynamic>>>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Map<String, dynamic>>>(
        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']),
              );
            }),
          );
        },
      ),
    );
  }
}

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.

1flutter run

Edit this page on GitHub