Programming/Flutter

Flutter와 Supabase

나쵸캣 2024. 8. 5. 10:14
반응형

Flutter와 Supabase를 연동하는 방법에 대해 안내해드리겠습니다. Supabase는 PostgreSQL을 기반으로 한 오픈 소스 Firebase 대안입니다. Flutter는 모바일, 웹, 데스크톱 애플리케이션을 개발할 수 있는 프레임워크입니다. 두 기술을 결합하여 애플리케이션의 백엔드를 구현할 수 있습니다.

1. Flutter 프로젝트 설정

먼저, Flutter 프로젝트를 생성합니다. 이미 프로젝트가 있다면 이 단계를 건너뛰셔도 됩니다.

flutter create my_supabase_app
cd my_supabase_app​

2. Dependencies 추가

pubspec.yaml 파일에 Supabase 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^0.2.7 # 최신 버전 확인 후 추가

그리고 의존성을 설치합니다.

flutter pub get​

3. Supabase 초기화

Supabase를 사용하려면 프로젝트에 대한 URL과 공개 API 키가 필요합니다. Supabase 웹사이트에서 프로젝트를 생성하고 정보를 가져옵니다.

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

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

  // Supabase 초기화
  await Supabase.initialize(
    url: 'https://your-supabase-url.supabase.co',
    anonKey: 'your-public-anon-key',
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Supabase with Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Supabase with Flutter'),
      ),
      body: Center(
        child: Text('Supabase 연동 예제'),
      ),
    );
  }
}

4. 데이터베이스 연동 예제

데이터 삽입

Future<void> insertData() async {
  final response = await Supabase.instance.client
    .from('your_table_name')
    .insert({'column_name': 'value'});
  
  if (response.error == null) {
    print('데이터 삽입 성공');
  } else {
    print('데이터 삽입 실패: ${response.error.message}');
  }
}

데이터 조회

Future<void> fetchData() async {
  final response = await Supabase.instance.client
    .from('your_table_name')
    .select()
    .execute();

  if (response.error == null) {
    final data = response.data;
    print('데이터 조회 성공: $data');
  } else {
    print('데이터 조회 실패: ${response.error.message}');
  }
}

5. 인증 예제

회원가입

Future<void> signUp(String email, String password) async {
  final response = await Supabase.instance.client.auth.signUp(
    email,
    password,
  );

  if (response.error == null) {
    print('회원가입 성공');
  } else {
    print('회원가입 실패: ${response.error.message}');
  }
}

로그인

Future<void> signIn(String email, String password) async {
  final response = await Supabase.instance.client.auth.signIn(
    email: email,
    password: password,
  );

  if (response.error == null) {
    print('로그인 성공');
  } else {
    print('로그인 실패: ${response.error.message}');
  }
}

6. 결론

이제 Flutter와 Supabase를 연동하여 애플리케이션의 다양한 기능을 구현할 수 있습니다. 여기에서는 기본적인 데이터베이스 연동과 인증 예제를 소개했지만, Supabase의 다양한 기능을 활용하여 더욱 복잡한 애플리케이션을 개발할 수 있습니다. Supabase의 공식 문서를 참조하여 추가적인 기능을 탐색해보세요.

반응형