How to Connect Supabase to Flutter

1# pubspec.yaml
2dependencies:
3  flutter:
4    sdk: flutter
5  supabase_flutter: ^2.0.0
6
7# Then run:
8flutter pub get

1import 'package:flutter/material.dart';
2import 'package:supabase_flutter/supabase_flutter.dart';
3
4void main() async {
5  WidgetsFlutterBinding.ensureInitialized();
6
7  await Supabase.initialize(
8    url: 'https://your-project-ref.supabase.co',
9    anonKey: 'your-anon-key-here',
10  );
11
12  runApp(const MyApp());
13}

1final supabase = Supabase.instance.client;
2
3// Sign up a new user
4Future<void> signUp(String email, String password) async {
5  final response = await supabase.auth.signUp(
6    email: email,
7    password: password,
8  );
9  if (response.user == null) {
10    throw Exception('Sign up failed');
11  }
12}
13
14// Sign in with email and password
15Future<void> signIn(String email, String password) async {
16  final response = await supabase.auth.signInWithPassword(
17    email: email,
18    password: password,
19  );
20  if (response.session == null) {
21    throw Exception('Sign in failed');
22  }
23}
24
25// Sign out
26Future<void> signOut() async {
27  await supabase.auth.signOut();
28}

1class AuthGate extends StatelessWidget {
2  const AuthGate({super.key});
3
4  @override
5  Widget build(BuildContext context) {
6    return StreamBuilder<AuthState>(
7      stream: Supabase.instance.client.auth.onAuthStateChange,
8      builder: (context, snapshot) {
9        if (snapshot.connectionState == ConnectionState.waiting) {
10          return const Center(child: CircularProgressIndicator());
11        }
12
13        final session = snapshot.data?.session;
14        if (session != null) {
15          return const HomePage();
16        } else {
17          return const LoginPage();
18        }
19      },
20    );
21  }
22}

1final supabase = Supabase.instance.client;
2
3// Fetch all todos for the current user
4Future<List<Map<String, dynamic>>> getTodos() async {
5  final response = await supabase
6      .from('todos')
7      .select()
8      .order('created_at', ascending: false);
9  return List<Map<String, dynamic>>.from(response);
10}
11
12// Insert a new todo
13Future<void> addTodo(String title) async {
14  await supabase.from('todos').insert({
15    'title': title,
16    'is_complete': false,
17    'user_id': supabase.auth.currentUser!.id,
18  });
19}
20
21// Update a todo
22Future<void> toggleTodo(int id, bool isComplete) async {
23  await supabase
24      .from('todos')
25      .update({'is_complete': isComplete})
26      .eq('id', id);
27}
28
29// Delete a todo
30Future<void> deleteTodo(int id) async {
31  await supabase.from('todos').delete().eq('id', id);
32}

1-- Enable RLS
2alter table public.todos enable row level security;
3
4-- Users can read their own todos
5create policy "Users can read own todos"
6  on public.todos for select
7  to authenticated
8  using ((select auth.uid()) = user_id);
9
10-- Users can create their own todos
11create policy "Users can create own todos"
12  on public.todos for insert
13  to authenticated
14  with check ((select auth.uid()) = user_id);
15
16-- Users can update their own todos
17create policy "Users can update own todos"
18  on public.todos for update
19  to authenticated
20  using ((select auth.uid()) = user_id);
21
22-- Users can delete their own todos
23create policy "Users can delete own todos"
24  on public.todos for delete
25  to authenticated
26  using ((select auth.uid()) = user_id);