快速入门: Flutter

第一步：在 MemFire Cloud 仪表板中创建一个新应用。#

应用准备就绪后，进入应用，在左侧菜单->表编辑器选择 SQL 编辑器在 MemFire Cloud 数据库中创建一个表。使用以下 SQL 语句创建包含一些示例数据的国家/地区表。

  -- Create the table
  CREATE TABLE countries (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL
  );
  -- Insert some sample data into the table
  INSERT INTO countries (name) VALUES ('United States');
  INSERT INTO countries (name) VALUES ('Canada');
  INSERT INTO countries (name) VALUES ('Mexico');

第二步：创建 Flutter 应用#

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

flutter create my_app

第三步：安装 Supabase 客户端库#

最快的入门方法是使用 supabase_flutter 客户端库，它提供了一些简便的API，用于在 Flutter 应用程序中使用 Supabase。在Flutter应用程序中打开pubspec.yaml文件，并将supabase_flutter添加为依赖项。

supabase_flutter: ^1.6.2

第四步：初始化 Supabase 客户端#

打开 lib/main.dart 并编辑 main 函数以使用您的项目 URL 和公共 API（匿名）密钥初始化 Supabase。

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());
}

第五步：在应用程序中查询数据

使用 FutureBuilder 在主页加载时获取数据并在 ListView 中显示查询结果。使用以下代码替换默认的 MyApp 和 MyHomePage 类。

1class MyApp extends StatelessWidget {
2  const MyApp({Key? key}) : super(key: key);
3
4  @override
5  Widget build(BuildContext context) {
6    return const MaterialApp(
7      title: 'Countries',
8      home: HomePage(),
9    );
10  }
11}
12
13class HomePage extends StatefulWidget {
14  const HomePage({super.key});
15
16  @override
17  State<HomePage> createState() => _HomePageState();
18}
19
20class _HomePageState extends State<HomePage> {
21  final _future = Supabase.instance.client
22      .from('countries')
23      .select<List<Map<String, dynamic>>>();
24
25  @override
26  Widget build(BuildContext context) {
27    return Scaffold(
28      body: FutureBuilder<List<Map<String, dynamic>>>(
29        future: _future,
30        builder: (context, snapshot) {
31          if (!snapshot.hasData) {
32            return const Center(child: CircularProgressIndicator());
33          }
34          final countries = snapshot.data!;
35          return ListView.builder(
36            itemCount: countries.length,
37            itemBuilder: ((context, index) {
38              final country = countries[index];
39              return ListTile(
40                title: Text(country['name']),
41              );
42            }),
43          );
44        },
45      ),
46    );
47  }
48}

第六步：启动应用程序

运行您的应用程序，默认情况下，应用程序应在您的网络浏览器中启动。请注意，supabase_flutter 与网络、iOS、Android、macOS 和 Windows 应用程序兼容。在 MacOS 上运行应用程序需要额外配置来设置权利。

flutter run