📚 How to Use Supabase with Dart: Login & CRUD Made Easy for Beginners

✨ Introduction

Are you building your first Flutter app and wondering how to store data or let users log in? Look no further! In this guide, you’ll learn how to connect Supabase with Dart, enabling login/signup and full CRUD (Create, Read, Update, Delete) operations with just a few lines of code.

By the end, you’ll build a mini Notes App where users can sign up, log in, and manage their personal notes. 💬

🤔 What is Supabase? (With Analogy)

Think of Supabase as the “open-source Firebase.” Imagine you’re building a digital notebook. You’ll need:

A shelf (database)
A lock on the notebook (authentication)
A helper to keep everything synced (real-time updates)
A backend brain (API)

Supabase gives you all of that — without setting up your own servers. It’s:

Open-source ✅
Self-hostable ✅
Easy for Flutter devs ✅

Core features include:

🗃️ PostgreSQL database
🔐 Auth (email/password, OAuth)
🌐 RESTful & GraphQL API
🔁 Real-time subscriptions
🔄 Storage & Edge functions

💡 Why Dart Developers Should Use Supabase

Flutter is powered by Dart, and with the supabase_flutter package, integrating Supabase is smooth and intuitive. Here’s why it’s perfect for beginners:

No backend setup needed
Easy Dart API for login, queries, and real-time
Great for MVPs, student projects, or full production apps

🛠️ Setup Guide

Let’s walk through setting up Supabase.

1. Create Supabase Project

Go to https://supabase.com/
Create an account → Start a new project
Choose organization name, password, and region
Once created, go to Project Settings > API:
- Copy your URL and anon key 🔑

2. Enable Auth

Go to Authentication > Settings
Enable Email/Password login

3. Create a Table (`notes`)

Go to Table Editor
Create a table called notes:

id: uuid (primary key, default `uuid_generate_v4()`)
user_id: uuid
title: text
content: text
created_at: timestamp (default `now()`)

id: uuid (primary key, default `uuid_generate_v4()`)
user_id: uuid
title: text
content: text
created_at: timestamp (default `now()`)

Enable Row Level Security (RLS)
Add this policy:

SELECT, INSERT, UPDATE, DELETE ON notes
TO authenticated
USING (auth.uid() = user_id)

SELECT, INSERT, UPDATE, DELETE ON notes
TO authenticated
USING (auth.uid() = user_id)

🧑‍💻 Project Setup in Dart (Flutter)

1. Create Flutter Project

flutter create supabase_notes
cd supabase_notes

flutter create supabase_notes
cd supabase_notes

2. Add Dependencies

In pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^1.10.17

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^1.10.17

Run:

flutter pub get

flutter pub get

3. Initialize Supabase

In main.dart:

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

void main() async {
  await Supabase.initialize(
    url: 'https://your-project.supabase.co',
    anonKey: 'your-anon-key',
  );
  runApp(MyApp());
}

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

void main() async {
  await Supabase.initialize(
    url: 'https://your-project.supabase.co',
    anonKey: 'your-anon-key',
  );
  runApp(MyApp());
}

🔐 User Login and Signup

Signup:

final response = await Supabase.instance.client.auth.signUp(
  email: 'test@example.com',
  password: 'password123',
);

final response = await Supabase.instance.client.auth.signUp(
  email: 'test@example.com',
  password: 'password123',
);

Login:

final response = await Supabase.instance.client.auth.signInWithPassword(
  email: 'test@example.com',
  password: 'password123',
);

final response = await Supabase.instance.client.auth.signInWithPassword(
  email: 'test@example.com',
  password: 'password123',
);

Check Logged In User:

final user = Supabase.instance.client.auth.currentUser;

final user = Supabase.instance.client.auth.currentUser;

Supabase stores a token locally, so users stay logged in after restarting the app!

📝 CRUD Operations

Let’s manage notes! Each function here uses notes table created earlier.

✅ Create Note

final user = Supabase.instance.client.auth.currentUser;

await Supabase.instance.client.from('notes').insert({
  'user_id': user!.id,
  'title': 'First Note',
  'content': 'Hello Supabase!',
});

final user = Supabase.instance.client.auth.currentUser;

await Supabase.instance.client.from('notes').insert({
  'user_id': user!.id,
  'title': 'First Note',
  'content': 'Hello Supabase!',
});

📄 Read Notes

final response = await Supabase.instance.client
  .from('notes')
  .select()
  .eq('user_id', Supabase.instance.client.auth.currentUser!.id);

final notes = response;

final response = await Supabase.instance.client
  .from('notes')
  .select()
  .eq('user_id', Supabase.instance.client.auth.currentUser!.id);

final notes = response;

✏️ Update Note

await Supabase.instance.client
  .from('notes')
  .update({'title': 'Updated Title'})
  .eq('id', noteId);

await Supabase.instance.client
  .from('notes')
  .update({'title': 'Updated Title'})
  .eq('id', noteId);

🗑️ Delete Note

await Supabase.instance.client
  .from('notes')
  .delete()
  .eq('id', noteId);

await Supabase.instance.client
  .from('notes')
  .delete()
  .eq('id', noteId);

💡 Real-World Example: Simple Notes App

Imagine this user flow:

User opens the app → sees login/signup screen
After login, they see a list of their own notes
They can create, update, delete their notes
Other users cannot see each other’s data (thanks to Row Level Security)

🔥 Bonus Tips

🧯 Error Handling

try {
  final res = await Supabase.instance.client.from('notes').select();
  print(res);
} catch (e) {
  print('Something went wrong: $e');
}

try {
  final res = await Supabase.instance.client.from('notes').select();
  print(res);
} catch (e) {
  print('Something went wrong: $e');
}

🔐 Keep Keys Safe

Never expose serviceRole key
Use .env with flutter_dotenv for managing secrets

✅ Conclusion

Congrats! 🎉 You’ve just learned:

What Supabase is and why it’s great for Flutter
How to set up Supabase + Dart
Auth and CRUD operations
A working Notes app example

🚀 What to Learn Next?

Row-Level Security in depth
Supabase Functions (PostgreSQL or Edge)
Realtime data subscriptions
Self-hosting Supabase with Docker

📦 Helpful Links