Supabase và Flutter: Mobile App Cross-Platform Siêu Tốc

Flutter App
├── UI Layer (Widgets)
├── Business Logic (BLoC/Provider/State Management)
└── Data Layer (Supabase Client)
    ├── Auth
    ├── Database (PostgreSQL)
    ├── Storage
    └── Realtime

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: latest

import 'package:supabase_flutter/supabase_flutter.dart';

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

4. Authentication đơn giản

// Sign up
final authResponse = await Supabase.instance.client.auth.signUp(
  '[email protected]',
  'password123',
);

// Sign in
final signInResponse = await Supabase.instance.client.auth.signIn(
  email: '[email protected]',
  password: 'password123',
);

5. Database CRUD với Row Level Security

Tạo table trong Supabase Dashboard:

CREATE TABLE todos (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  completed BOOLEAN DEFAULT false,
  user_id UUID REFERENCES auth.users ON DELETE CASCADE
);

Thiết lập RLS policy:

CREATE POLICY "Users can view own todos." ON todos
  FOR SELECT USING ( auth.uid() = user_id );

CREATE POLICY "Users can insert own todos." ON todos
  FOR INSERT WITH CHECK ( auth.uid() = user_id );

CREATE POLICY "Users can update own todos." ON todos
  FOR UPDATE USING ( auth.uid() = user_id );

CREATE POLICY "Users can delete own todos." ON todos
  FOR DELETE USING ( auth.uid() = user_id );

Code Flutter:

// Insert
await Supabase.instance.client
  .from('todos')
  .insert([
    {'title': 'Learn Supabase', 'user_id': Supabase.instance.client.auth.user!.id}
  ])
  .execute();

// Select
final response = await Supabase.instance.client
  .from('todos')
  .select()
  .execute();

6. Realtime subscriptions

final subscription = Supabase.instance.client
  .from('todos')
  .on(SupabaseEventTypes.REALTIME)
  .subscribe((payload) {
    // Handle realtime data
  });

7. Storage cho file upload

final file = File('path/to/image.png');
final response = await Supabase.instance.client.storage
  .from('avatars')
  .upload('user123.png', file);

Mẹo tối ưu và best practices

– Use BLoC/Provider để tách biệt logic business khỏi UI.
– Enable offline support với sqflite hoặc hive sync với Supabase khi online.
– Secure API keys bằng cách sử dụng environment variables.
– Test RLS policies kỹ lưỡng trong Supabase Dashboard.
– Monitor usage trong Supabase Project Settings để tránh vượt quota free tier.

Kết luận

Supabase và Flutter là bộ đôi mạnh mẽ giúp bạn xây dựng ứng dụng cross-platform nhanh chóng mà không phải đánh đổi chất lượng. Với backend mở rộng tự động, authentication tích hợp sẵn, database full SQL, và realtime subscriptions, bạn có thể tập trung vào trải nghiệm người dùng thay vì lo lắng về infrastructure. Dù bạn là startup cần MVP gấp hay developer muốn thử nghiệm ý tưởng mới, cặp đôi này xứng đáng được đưa vào “toolbelt” của bạn.

Bạn đã sẵn sàng để bắt đầu xây dựng ứng dụng tiếp theo với Supabase và Flutter? Hãy để lại bình luận chia sẻ trải nghiệm của bạn!