Konfigurasi Supabase di main.dart

 

Jika kamu seorang developer Flutter yang ingin mengintegrasikan Supabase sebagai backend, berarti kamu sedang berada di artikel yang tepat. Tenang, kita akan bahas dari nol, dari “Supabase itu apaan sih?” sampai “cara konfigurasi Supabase di main.dart agar aplikasi kamu siap tempur.” Santai saja, tapi jangan sampai ketinggalan detail pentingnya, ya.

 

Apa itu Supabase?

Supabase sering disebut “Firebase versi open-source.” Secara sederhana, Supabase adalah backend-as-a-service (BaaS) yang menyediakan:

• Database PostgreSQL siap pakai

• Autentikasi pengguna (email/password, OAuth, dsb.)

• Realtime subscriptions untuk notifikasi live

• Storage untuk file seperti gambar atau dokumen

• API otomatis berdasarkan database

Kelebihannya? Gratis untuk mulai, open-source, dan mudah diintegrasikan dengan Flutter.

Bayangkan kamu ingin membuat aplikasi kasir, aplikasi sosial media, atau bahkan aplikasi absensi. Dengan Supabase, kamu tidak perlu repot setting backend sendiri. Tinggal konfigurasi di Flutter, dan voilà backend sudah siap.

 

Mengapa Konfigurasi di main.dart Penting?

Di Flutter, main.dart adalah entry point aplikasi. Jadi semua konfigurasi global, termasuk Supabase, biasanya diletakkan di sini. Dengan setup yang rapi di main.dart:

1. Koneksi Supabase bisa digunakan di seluruh aplikasi tanpa konfigurasi berulang.

2. Autentikasi dan state management bisa lebih mudah karena Supabase instance tersedia sejak awal.

3. Kode lebih bersih dan maintainable karena semua konfigurasi terpusat.

    

Persiapan Sebelum Konfigurasi

Sebelum kita masuk kode, pastikan beberapa hal berikut sudah siap:

1. Flutter SDK terinstall di komputer kamu (minimal Flutter 3.x).

2. Akun Supabase sudah dibuat di supabase.com.

3. Proyek Flutter sudah siap, minimal dengan struktur standar:

lib/
 ├── main.dart
 └── screens/

4. Package Supabase ditambahkan di pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^1.0.0

Setelah itu, jangan lupa jalankan flutter pub get.

 

Langkah-langkah Konfigurasi Supabase di main.dart

Sekarang kita masuk ke bagian inti: menaruh Supabase di main.dart agar aplikasi Flutter kita bisa terkoneksi ke Supabase.

1. Import Package Supabase

Buka main.dart dan tambahkan:

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

Mudah, kan? Tinggal dua baris dan kita sudah siap memulai.

 

2. Inisialisasi Supabase

Supabase butuh URL proyek dan anon key untuk bisa terkoneksi. Dapatkan dari dashboard Supabase:

• Masuk ke dashboard Supabase

• Pilih proyek kamu

• Klik menu Settings > API

• Salin URL dan anon key

Setelah itu, kita inisialisasi Supabase sebelum runApp():

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: 'https://xyzcompany.supabase.co', // ganti dengan URL proyek kamu
    anonKey: 'YOUR_ANON_KEY',             // ganti dengan anon key kamu
  );

  runApp(const MyApp());
}

⚠️ Catatan: WidgetsFlutterBinding.ensureInitialized(); wajib dipanggil jika kita pakai await di main, agar Flutter siap melakukan operasi asynchronous sebelum app berjalan.

 

3. Membuat Root Widget dengan Supabase

Supabase menyediakan widget SupabaseAuth atau kamu bisa langsung menggunakan Supabase.instance.client untuk akses database dan autentikasi. Contoh root widget sederhana:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Supabase Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomeScreen(),
    );
  }
}

Di sini, HomeScreen bisa menjadi tempat kita menguji koneksi Supabase, misalnya mengambil data dari tabel users.

 

4. Contoh Query Database

Supabase menggunakan PostgreSQL, dan Flutter bisa akses dengan:

final client = Supabase.instance.client;

Future<void> fetchUsers() async {
  final response = await client
      .from('users')
      .select()
      .execute();

  if (response.error == null) {
    print('Data users: ${response.data}');
  } else {
    print('Error: ${response.error!.message}');
  }
}

Simple, kan? Sekali konfigurasi di main.dart, kamu bisa pakai Supabase.instance.client di seluruh app.

 

5. Tips Best Practice

1. Gunakan environment variables untuk anon key, jangan langsung hardcode di main.dart. Bisa pakai .env atau package flutter_dotenv.

2. Gunakan state management seperti Riverpod atau Provider untuk menyimpan data login user.

3. Tangani error dengan baik, Supabase biasanya memberikan error di response. Jangan lupa tampilkan pesan yang friendly.

4. Enable SSL untuk koneksi Supabase agar lebih aman.

    

6. Tambahan: Realtime dengan Supabase

Supabase mendukung realtime subscriptions. Misalnya kita ingin mendengar perubahan di tabel messages:

final subscription = client
  .from('messages')
  .stream(primaryKey: ['id'])
  .listen((event) {
    print('Pesan baru: $event');
  });

Keren, kan? Sekali setup di main.dart, realtime update bisa langsung jalan di seluruh aplikasi.

Konfigurasi Supabase di main.dart itu simpel tapi sangat krusial. Dengan setup yang benar:

• Koneksi Supabase bisa digunakan di seluruh app

• Query database dan autentikasi lebih mudah

• Code lebih rapi dan maintainable

• Bisa langsung memanfaatkan fitur Realtime dan Storage

Flutter + Supabase itu pasangan yang cocok buat kamu yang ingin cepat membuat aplikasi dengan backend kuat tapi tanpa ribet setup server sendiri. Jadi jangan ragu eksplor lebih jauh, karena Supabase bisa scale seiring kebutuhan aplikasi kamu.