Flutter y Supabase - Setup inicial en un proyecto Flutter

Objetivo

Opino que el código de ejemplo que ofrece Supabase no es del todo adecuado para un proyecto real.

El código debe prooprcionar las siguientes caracterísitcas:

• Archivo de entorno para las variables de configuración
• Clase de configuración de Supabase
• Exponer el cliente de Supabase para usarlo en datasources o repositorios

Prerequisitos

Para seguir este artículo necesitas tener instalado:

Dependencias

Para el proyecto, necesitas las siguientes dependencias en el archivo pubspec.yaml:

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

Implementación

Directorio y estructura de archivos

Los archivos van a estar dentro de la siguiente estructura:

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

Configuración de variables de entorno

Crea un archivo .env en la raíz del proyecto para almacenar las variables de entorno necesarias para la configuración de Supabase:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=tu_supabase_anon_key

Nota

Reemplaza your_supabase_url y your_supabase_anon_key con los valores reales de tu proyecto Supabase y añade el archivo .env a tu .gitignore para evitar subirlo a un repositorio público.

Configuración de Supabase

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

Explicación del código

El código lee las variables de entorno definidas en el archivo .env utilizando flutter_dotenv y luego inicializa el cliente de Supabase con esos valores.

Lo que me gusta de este enfoque es:

• Centraliza la configuración de Supabase en una sola clase.
• Expone un método estático getClient() para acceder al cliente de Supabase desde cualquier parte de la aplicación, preferiblemente en datasources o repositorios.

Environment template

Para diferentes entornos sube un fichero llamado .env.template con las variables de entorno sin valores para que otros desarrolladores sepan qué variables deben definir.

Inicialización en 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,
      );
    }
  }

El código carga las variables de entorno al inicio de la aplicación y luego inicializa Supabase antes de ejecutar la aplicación Flutter. Como tip adicional, la palabra reservada await y async en el main indican que se van a realizar operaaciones del tipo input/output (I/O) antes de iniciar la app.

Permisos de Supabase para Android

Agrega los siguientes permisos en el archivo AndroidManifest.xml ubicado en android/app/src/main/AndroidManifest.xml:

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

Referencias

• Documentación oficial de Supabase para Flutter
• Paquete flutter_dotenv