Tạo hệ thống notification realtime với Supabase và Flutter cực nhanh

dependencies:
    flutter:
      sdk: flutter
    supabase_flutter: ^2.8.0
    flutter_riverpod: ^2.0.0

import 'package:supabase_flutter/supabase_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_SUPABASE_ANON_KEY',
  );
  runApp(MyApp());
}

CREATE TABLE notifications (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users NOT NULL,
  title TEXT NOT NULL,
  body TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  read BOOLEAN DEFAULT FALSE
);

Tiếp theo, tạo một subscription để lắng nghe thay đổi:

class NotificationService {
  static final SupabaseClient _supabase = Supabase.instance.client;
  static Stream<RealtimeModel> getNotificationStream(String userId) {
    return _supabase
        .channel('notifications')
        .on(
          tableName: 'notifications',
          event: EventType.Insert,
          callback: (payload) {
            if (payload['new']['user_id'] == userId) {
              return payload;
            }
            return null;
          },
        )
        .stream();
  }
}

Subscription này sẽ lắng nghe mọi insert mới vào bảng notifications và chỉ trả về notification cho user hiện tại.

Gửi notification từ Flutter

Để gửi notification, bạn có thể tạo một function đơn giản:

Future<void> sendNotification(String userId, String title, String body) async {
  final _supabase = Supabase.instance.client;
  final response = await _supabase
      .from('notifications')
      .insert([
        {
          'user_id': userId,
          'title': title,
          'body': body,
        },
      ])
      .execute();
  return response;
}

Khi gọi function này, notification sẽ được lưu vào database và tự động đẩy đến client thông qua subscription.

Hiển thị notification trong UI

Để hiển thị notification, bạn có thể sử dụng Riverpod để quản lý state:

final notificationProvider = StreamProvider.autoDispose<List<Notification>>((ref) {
  final userId = 'current_user_id'; // Lấy từ auth
  final stream = NotificationService.getNotificationStream(userId);
  return stream.map((event) {
    // Biến đổi event thành list notification
  }).handleError((error) => []);
});

Trong widget, lắng nghe stream và hiển thị danh sách notification:

class NotificationList extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final notifications = watch(notificationProvider);
    return ListView.builder(
      itemCount: notifications.length,
      itemBuilder: (context, index) {
        final notification = notifications[index];
        return ListTile(
          title: Text(notification.title),
          subtitle: Text(notification.body),
        );
      },
    );
  }
}

Xử lý notification đã đọc

Để đánh dấu notification đã đọc, bạn có thể cập nhật cột read trong database:

Future<void> markAsRead(String notificationId) async {
  final _supabase = Supabase.instance.client;
  await _supabase
      .from('notifications')
      .update({'read': true})
      .eq('id', notificationId)
      .execute();
}

Khi user tương tác với notification, gọi function này để cập nhật trạng thái.

Kết luận

Việc xây dựng hệ thống notification realtime với Supabase và Flutter không chỉ đơn giản mà còn rất mạnh mẽ. Nhờ vào Realtime của Supabase, bạn có thể dễ dàng lắng nghe và phản hồi các thay đổi dữ liệu, trong khi Flutter giúp bạn xây dựng giao diện mượt mà và thân thiện. Bằng cách kết hợp các công cụ này, bạn có thể tạo ra một hệ thống notification hoàn chỉnh, bảo mật và mở rộng, nâng cao trải nghiệm người dùng cho ứng dụng của mình.