快速开始

在Flutter中使用Supabase

学习如何创建Supabase项目，向数据库添加示例数据，以及从Flutter应用中查询数据。

1

创建一个Supabase项目

前往 database.new 并创建一个新的Supabase项目。

当您的项目启动并运行后，前往 表编辑器，创建一个新表并插入一些数据。

或者，您可以在项目的 SQL编辑器 中运行以下代码片段。这将创建一个包含一些示例数据的 instruments 表。

1
2
3
4
5
6
7
8
9
10
11
12
13
-- 创建表create table instruments (  id bigint primary key generated always as identity,  name text not null);-- 向表中插入一些示例数据insert into instruments (name)values  ('violin'),  ('viola'),  ('cello');alter table instruments enable row level security;

通过添加RLS策略，使表中的数据可公开读取：

1
2
3
4
create policy "public can read instruments"on public.instrumentsfor select to anonusing (true);
2

创建Flutter应用

使用flutter create命令创建Flutter应用。如果您已有可运行的应用，可以跳过此步骤。

Terminal
1
flutter create my_app
3

安装Supabase客户端库

最快开始的方式是使用supabase_flutter客户端库，它提供了从Flutter应用操作Supabase的便捷接口。

打开Flutter应用中的pubspec.yaml文件，添加supabase_flutter作为依赖项。

pubspec.yaml
1
supabase_flutter: ^2.0.0
4

初始化Supabase客户端

打开lib/main.dart并编辑main函数，使用您的项目URL和公共API(anon)密钥初始化Supabase：

Project URL
Anon key
lib/main.dart
1
2
3
4
5
6
7
8
9
10
11
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());}
5

从应用查询数据

使用FutureBuilder在首页加载时获取数据，并在ListView中显示查询结果。

用以下代码替换默认的MyApp和MyHomePage类。

lib/main.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
class MyApp extends StatelessWidget {  const MyApp({super.key});  @override  Widget build(BuildContext context) {    return const MaterialApp(      title: 'Instruments',      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('instruments')      .select();  @override  Widget build(BuildContext context) {    return Scaffold(      body: FutureBuilder(        future: _future,        builder: (context, snapshot) {          if (!snapshot.hasData) {            return const Center(child: CircularProgressIndicator());          }          final instruments = snapshot.data!;          return ListView.builder(            itemCount: instruments.length,            itemBuilder: ((context, index) {              final instrument = instruments[index];              return ListTile(                title: Text(instrument['name']),              );            }),          );        },      ),    );  }}
6

启动应用

在您选择的平台上运行应用！默认情况下应用会在网页浏览器中启动。

请注意supabase_flutter兼容网页、iOS、Android、macOS和Windows应用。 在macOS上运行应用需要额外配置来设置权限。

Terminal
1
flutter run

设置深度链接

许多登录方法需要使用深度链接在认证后将用户重定向回您的应用。有关为所有平台（包括网页）设置深度链接的更多信息，请参阅 Flutter 移动端指南。

进入生产环境

Android

在生产环境中，您的 Android 应用需要明确权限才能使用用户设备上的互联网连接，这是与 Supabase API 通信所必需的。为此，请将以下行添加到 android/app/src/main/AndroidManifest.xml 文件中。

1
2
3
4
5
<manifest xmlns:android="http://schemas.android.com/apk/res/android">  <!-- 需要此权限才能从互联网获取数据 -->  <uses-permission android:name="android.permission.INTERNET" />  <!-- ... --></manifest>