Flutter와 함께 Supabase 사용하기

이번에 모바일 앱 개발에 Supabase와 Flutter를 결합하여 사용하기로 결정했습니다.

Google Firebase, AWS Amplify, 그리고 Supabase 중에서 어떤 것을 선택할지 고민했으나, 사용자 경험과 비용 측면에서 Supabase가 더 편리하다고 판단하여 Supabase를 선택하게 되었습니다.

또한, Supabase는 Flutter SDK를 제공하지만, React Native SDK는 공식적으로 지원하지 않는다는 점.
그리고 전 세계적으로 플러터가 더 인기가 있으며, 보안 측면에서도 Flutter를 통한 개발이 더 안전하다고 판단했습니다.

Supabase with Flutter 프로젝트 셋팅은 다음과 같이 진행합니다:

1. Flutter 앱 만들기

flutter create my_app

2. Supabase 클라이언트 라이브러리 설치

pubspec.yaml 파일을 열고 supabase_flutter를 추가

supabase_flutter: ^1.6.2

3. Supabase 클라이언트 초기화

lib/main.dart 파일을 수정

import 'package:supabase_flutter/supabase_flutter.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_SUPABASE_ANON_KEY',
  );
  runApp(MyApp());
}

4. 앱에서 DB 쿼리

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Countries',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _future = Supabase.instance.client
      .from('countries')
      .select<List<Map<String, dynamic>>>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: _future,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return const Center(child: CircularProgressIndicator());
          }
          final countries = snapshot.data!;
          return ListView.builder(
            itemCount: countries.length,
            itemBuilder: ((context, index) {
              final country = countries[index];
              return ListTile(
                title: Text(country['name']),
              );
            }),
          );
        },
      ),
    );
  }
}

5. 안드로이드 설정

android/app/src/main/AndroidManifest.xml 파일에 다음을 추가

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  (html comment removed:  Required to fetch data from the internet. )
  <uses-permission android:name="android.permission.INTERNET" />
  (html comment removed:  ... )
</manifest>

6. 앱 시작

flutter run