From IdeaGarage, present【Supabase Realtime】

Hello, brand new community! IdeaGarage in Japan.
So nice and it looks like it will be a place for lively exchanges!

I hope more people get interest of using Supabase in FlutterFlow every day.
And I like FlutterFlow especially its infinity customization.

To celebrate new community, I introduce the way of 【Supabase Realtime】 for self introduction. I like writing custom code.
The custom action code of using Supabase Realtime is as simple as this.

A scene where this real-time function is needed is, for example, a chat application.
It's so easy but confusing to use Supabase Realtime in FlutterFlow.
The code is simple, but we tested several situations, found the easiest way.

Create custom action using this code and place it to "On Page Load" of your destination page, and set tableName as target table, reloadAction as "Refresh database request".

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:supabase_flutter/supabase_flutter.dart';

Future<void> supaRealtime(
  String? tableName,
  Future<dynamic> Function() reloadAction,
) async {
  final supabase = SupaFlow.client;
  String table = tableName ?? '*';
  final channel = supabase.channel('public:' + table);
  channel.on(
    RealtimeListenTypes.postgresChanges,
    ChannelFilter(event: '*', schema: 'public', table: table),
    (payload, [ref]) {
      reloadAction();
      print('Reloaded.');
    },
  ).subscribe();
}


You can see a sample app of realtime HERE (No registration required).
You can log in by pressing “TestUser1”. If you open two browser windows and log in as the same user and add ToDo or check completion, please confirm that the display is updated in another window.

And if you may want to know the principle how it works, please read below.

We released updating version of the guidebook "FlutterFlow × Supabase Linkage step guide".
Now you can read additional content as【Supabase Realtime】.
We just sent the additional contents to those who already purchsed.
In this guidebook, added 10pages of PDF.

Any feedback is welcome.

26
43 replies