Flutter i Supabase - Setup inicial en un projecte Flutter

Objectiu

Opino que el codi d’exemple que ofereix Supabase no és del tot adequat per a un projecte real.

El codi ha de proporcionar les següents característiques:

• Arxiu d’entorn per a les variables de configuració
• Classe de configuració de Supabase
• Exposar el client de Supabase per a usar-lo en datasources o repositoris

Prerequisits

Per a seguir aquest article necessites tenir instal·lat:

Dependències

Per al projecte, necessites les següents dependències a l’arxiu pubspec.yaml:

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

Implementació

Directori i estructura d’arxius

Els arxius estaran dins de la següent estructura:

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

Configuració de variables d’entorn

Crea un arxiu .env a l’arrel del projecte per a emmagatzemar les variables d’entorn necessàries per a la configuració de Supabase:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=tu_supabase_anon_key

Nota

Reemplaça your_supabase_url i your_supabase_anon_key amb els valors reals del teu projecte Supabase i afegeix l’arxiu .env al teu .gitignore per a evitar pujar-lo a un repositori públic.

Configuració 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ó del codi

El codi llegeix les variables d’entorn definides a l’arxiu .env utilitzant flutter_dotenv i després inicialitza el client de Supabase amb aquests valors.

El que m’agrada d’aquest enfocament és:

• Centralitza la configuració de Supabase en una sola classe.
• Exposa un mètode estàtic getClient() per a accedir al client de Supabase des de qualsevol part de l’aplicació, preferiblement en datasources o repositoris.

Plantilla d’entorn

Per a diferents entorns puja un fitxer anomenat .env.template amb les variables d’entorn sense valors perquè altres desenvolupadors sàpiguen quines variables han de definir.

Inicialització a 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 codi carrega les variables d’entorn a l’inici de l’aplicació i després inicialitza Supabase abans d’executar l’aplicació Flutter. Com a consell addicional, la paraula reservada await i async al main indiquen que es realitzaran operacions del tipus input/output (I/O) abans d’iniciar l’app.

Permisos de Supabase per a Android

Afegeix els següents permisos a l’arxiu AndroidManifest.xml ubicat a android/app/src/main/AndroidManifest.xml:

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

Referències

• Documentació oficial de Supabase per a Flutter
• Paquet flutter_dotenv