Flutter and Supabase - Initial Setup in a Flutter Project

Objetivo

I think that the example code provided by Supabase is not entirely suitable for a real-world project.

The code should provide the following features:

• Environment file for configuration variables
• Supabase configuration class
• Expose the Supabase client for use in datasources or repositories

Prerequisites

To follow this article, you need to have installed:

Dependencies

For this project, you will need the following dependencies in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^2.10.3
  flutter_dotenv: ^4.2.0

Implementation

Directory and File Structure

The files will be organized in the following structure for testing:

lib
├── config
│   ├── router
│   │   └── app_router.dart
│   ├── supabase
│   │   └── supabase_config.dart
│   └── themes
│       └── app_theme.dart
├── main.dart
pubspec.yaml
.env

Environment Variable Configuration

Create a .env file at the root of your project to store the environment variables needed for Supabase configuration:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key

Note

Replace your_supabase_url and your_supabase_anon_key with the actual values from your Supabase project, and add the .env file to your .gitignore to avoid uploading it to a public repository.

Supabase Configuration

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

class SupabaseConfig {
  static final String supabaseUrl = 'SUPABASE_URL';
  static final String supabaseAnonKey = 'SUPABASE_ANON_KEY';

  static Future<void> create() async {
    final url = dotenv.get(supabaseUrl);
    final key = dotenv.get(supabaseAnonKey);

    await Supabase.initialize(url: url, anonKey: key);
  }

  static SupabaseClient getClient() => Supabase.instance.client;
}

Code Explanation

The code reads the environment variables defined in the .env file using flutter_dotenv and then initializes the Supabase client with those values.

Advantages of this approach:

• Centralizes Supabase configuration in a single class.
• Exposes a static getClient() method to access the Supabase client from anywhere in the app, preferably in datasources or repositories.

Environment Template

For different environments, upload a file called .env.template with the environment variables but no values, so other developers know which variables to define.

Initialization in main.dart

Future<void> main() async {
  await dotenv.load(fileName: '.env');
  await SupabaseConfig.create();
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Supabase Setup',
        debugShowCheckedModeBanner: false,
      );
    }
  }

This code loads the environment variables at app startup and then initializes Supabase before running the Flutter app. As an additional tip, the reserved words await and async in main indicate that I/O operations will be performed before starting the app.

Supabase Permissions for Android

Add the following permission to the AndroidManifest.xml file located at android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

References

• Official Supabase documentation for Flutter
• flutter_dotenv package