Flutter에 supabase 적용하기

Goal

• Flutter 프로젝트에 supabase를 적용하여 client 인스턴스 생성하기

개요

이전 flutter로 토이프로젝트를 시작할 때 현재 Backend 개발자로 현업을 진행하고 있기 때문에 풀스택으로 진행하고자 하였다.

하지만 FE도 구현하고 BE도 구현하고자 하다보니 두 마리의 토끼를 둘 다 놓쳐 해당 프로젝트를 마무리 짓지 못한 경험이 있다.

그러다보니 인증, DB연결과 같은 역할을 해주는 서비스를 찾다 firebase와 supabase를 찾게 되었다.

결론부터 이야기하자면 필자는 supabase를 선택하였으며 선택한 이유는 아래와 같다.

1. 오픈소스
2. Postgresql를 이용 (firebase는 NoSql기반)

이 2가지가 supabase를 선택하는데 많은 영향을 주었다. (나중에 서비스가 커지게 된다면 NoSql보다 PG가 마이그레이션 하기 수월할 것도 포함이다.)

프로젝트 생성

프로젝트 생성은 간단하다. 깃허브 계정을 이용하여 supabase에 가입하였으며 Organization을 생성한 후 project를 생성해주기만 하면 된다.

Region은 다양하게 제공되며 필자는 Seoul을 선택하였다. DB 비밀번호도 설정이 가능하다.

Flutter 프로젝트에 적용하기

Flutter에서 supabase를 이용하려면 아래와 같은 명령어를 이용하여 라이브러리를 추가하면 된다.

flutter pub add supabase_flutter

라이브러리를 추가하였다면 project를 생성하였을 때 부여받은 Project URL과 API Key를 이용하여 Flutter에 적용할 수 있다.

2개의 키는 프로젝트 Home에서 조금만 내리면 확인이 가능하다.

App이 실행되는 main.dart로 이동하여 아래와 같은 코드만 추가해주면 적용이 끝난다.

@ constant.dart
// 1
final SUPABASE_URL = dotenv.get('SUPABASE_URL');
final SUPABASE_API_KEY = dotenv.get('SUPABASE_API_KEY');

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

  const envDivision = String.fromEnvironment('env', defaultValue: 'dev');
  await dotenv.load(fileName: './env/.env.$envDivision');

  // 2
  await Supabase.initialize(
    url: SUPABASE_URL,
    anonKey: SUPABASE_API_KEY,
    debug: dotenv.get('FLUTTER_ENV', fallback: 'development') == 'development',
  );
  runApp(const MyApp());
}

// 3
final supabase = Supabase.instance.client;

1. 상수를 별도로 관리하는 파일을 만들어 dotenv를 이용하여 supabase의 key값들을 정의한다.
2. supabase라이브러리를 이용하여 supabase를 초기화 해준다.
3. supabase의 client 인스턴스를 변수에 선언한다.

추가적으로 supabase를 초기화를 할 때 부여할 수 있는 옵션들이 있다 해당 옵션들은 supabase_flutter_initializing에서 확인이 가능하다.

결과

정상적으로 key값들을 이용하여 supabase의 인스턴스화를 성공했다면 터미널에서 아래와 같은 로그를 볼 수 있을 것이다.

REFERENCES

• supabase_flutter_docs