USARE FLUTTER CON SUPABASE

Signori e signore, ecco a voi Supabase...l'alternativa open source a Firebase.

Come il suo rivale, fornisce una console di amministrazione all'interno della quale è possibile registrare applicazioni, gestire un database, definire delle API e dei criteri di autenticazione alle singole app registrate.

Ma bando alle ciance e partiamo. Dopo aver creato un progetto nella dashboard di Supabase, sfruttiamo l'SQL Editor per creare una tabella countries con alcuni dati di esempio:

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

Per far si che l'integrazione con Supabase sia effettiva, è necessario aggiungere l'apposita dipendenza nel file pubspec.yaml:

supabase_flutter: ^1.6.2

A questo punto possiamo procedere con la creazione dell'applicazione Flutter:

flutter create my_app

Fatto ciò, all'interno del file main.dart, sarà necessario fornire i riferimenti alla sub di Supabase:

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

A seguito dell'inizializzazione del client, abbiamo tutti gli elementi affinché la nostra applicazione possa interrogare i dati della tabella countries all'interno di Supabase. Attraverso una semplice query, sarà possibile recuperare una lista di oggetti corrispondenti ai singoli record della tabella di cui sopra e che andranno dati "in pasto" al FutureBuilder per il rendering:

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']),
              );
            }),
          );
        },
      ),
    );
  }
}

Ed ecco a voi che il gioco è fatto; ora sarà possibile eseguire l'applicazione su un qualsiasi device con il comando:

flutter run

Qualora il vostro codice sia pronto per essere eseguito in produzione e stiate usando Android, non dimenticate di aggiungere l'apposita permission all'interno del file manifest:

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

Nei prossimi articoli continueremo ad utilizzare Supabase per i nostri porgetti Flutter ed in particolare ci concentreremo sulla realizzazione di un'app di budgeting.