Flutter数据库管理插件supabase的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter数据库管理插件supabase的使用

Supabase简介

Supabase 是一个开源的 Firebase 替代品。它提供的服务包括:

  • 监听数据库变化
  • 查询表,包括过滤、分页和深度嵌套关系(类似 GraphQL)
  • 创建、更新和删除行
  • 管理用户及其权限
  • 使用简单 UI 与数据库交互

对于 Flutter 应用开发,请使用 supabase_flutter 包。

安装与配置

pubspec.yaml 文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^0.4.0

然后运行 flutter pub get 来安装依赖包。

示例代码

以下是一个完整的示例,展示了如何使用 supabase_flutter 进行常见的数据库操作:

import 'dart:async';
import 'dart:io';

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_ANON_KEY',
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Supabase Example')),
        body: Center(child: Text('See console for database operations')),
      ),
    );
  }
}

Future<void> performDatabaseOperations() async {
  final supabase = Supabase.instance.client;

  // Query data
  final data = await supabase.from('countries').select().order('name', ascending: true);
  print('Query result: $data');

  // Insert data
  await supabase.from('countries').insert([
    {'name': 'Singapore'},
  ]);
  print('Inserted Singapore into countries table.');

  // Update data
  await supabase.from('countries').update({'name': 'Updated Singapore'}).eq('id', 1);
  print('Updated country with id 1.');

  // Delete data
  await supabase.from('countries').delete().eq('id', 1);
  print('Deleted country with id 1.');

  // Realtime
  final realtimeChannel = supabase.channel('my_channel');
  await realtimeChannel
      .onPostgresChanges(
          event: PostgresChangeEvent.all,
          schema: 'public',
          table: 'countries',
          callback: (payload) {
            print('Realtime change detected: $payload');
          })
      .subscribe();

  // Stream
  final streamSubscription = supabase
      .from('countries')
      .stream(primaryKey: ['id'])
      .order('name')
      .limit(10)
      .listen((snapshot) {
        print('Stream snapshot: $snapshot');
      });

  // Upload file to bucket "public"
  final file = File('example.txt');
  file.writeAsStringSync('File content');
  final storageResponse =
      await supabase.storage.from('public').upload('example.txt', file);
  print('Upload response: $storageResponse');

  // Get download URL
  final urlResponse =
      await supabase.storage.from('public').createSignedUrl('example.txt', 60);
  print('Download URL: $urlResponse');

  // Download text file
  final fileResponse =
      await supabase.storage.from('public').download('example.txt');
  print('Downloaded file content: ${String.fromCharCodes(fileResponse)}');

  // Delete file
  final deleteFileResponse =
      await supabase.storage.from('public').remove(['example.txt']);
  print('Deleted file response: ${deleteFileResponse.first.id}');

  // Local file cleanup
  if (file.existsSync()) file.deleteSync();

  // Unsubscribe from channel and stream
  await supabase.removeChannel(realtimeChannel);
  await streamSubscription.cancel();
}

void main() {
  performDatabaseOperations();
}

注意事项

  1. 初始化:确保在应用启动时调用 Supabase.initialize 方法。
  2. 环境变量:将 YOUR_SUPABASE_URLYOUR_ANON_KEY 替换为你的 Supabase 项目的真实 URL 和匿名密钥。
  3. 清理资源:在不再需要时取消订阅实时通道和流,以避免内存泄漏。

通过以上步骤,你可以在 Flutter 应用中轻松地集成和使用 Supabase 数据库管理功能。更多详细信息可以参考 官方文档


更多关于Flutter数据库管理插件supabase的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter数据库管理插件supabase的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用Supabase进行数据库管理的代码示例。这个示例将展示如何连接到Supabase、进行用户认证以及执行基本的CRUD(创建、读取、更新、删除)操作。

1. 准备工作

首先,你需要在Supabase创建一个项目并获取ANON_KEYURL。然后,在你的Flutter项目中添加Supabase的依赖。

pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  supabase_dart: ^0.4.1  # 确保使用最新版本

然后运行flutter pub get来安装依赖。

2. 初始化Supabase客户端

创建一个Dart文件(例如supabase_client.dart)来初始化Supabase客户端:

import 'package:supabase_dart/supabase_dart.dart';

class SupabaseClient {
  late SupabaseClient supabase;

  SupabaseClient(String url, String anonKey) {
    supabase = SupabaseClient(supabaseUrl: url, supabaseAnonKey: anonKey);
  }

  SupabaseClient getInstance() {
    return this.supabase;
  }
}

在你的主应用文件(例如main.dart)中实例化这个客户端:

import 'package:flutter/material.dart';
import 'package:your_app/supabase_client.dart';  // 确保路径正确

void main() {
  final supabaseClient = SupabaseClient('YOUR_SUPABASE_URL', 'YOUR_ANON_KEY');
  runApp(MyApp(supabaseClient.getInstance()));
}

class MyApp extends StatelessWidget {
  final SupabaseClient supabase;

  MyApp(this.supabase);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Supabase Flutter Example'),
        ),
        body: Center(
          child: MyHomePage(supabase: supabase),
        ),
      ),
    );
  }
}

3. 用户认证

以下是一个简单的用户登录和注册的示例:

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

class MyHomePage extends StatefulWidget {
  final SupabaseClient supabase;

  MyHomePage({required this.supabase});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  String? email;
  String? password;
  String? message;

  void _signUp() async {
    try {
      final credentials = SignUpCredentials(email: email!, password: password!);
      final result = await widget.supabase.auth.signUp(credentials);
      setState(() {
        message = 'Signed up successfully!';
      });
    } catch (e) {
      setState(() {
        message = 'Sign up failed: ${e.message}';
      });
    }
  }

  void _signIn() async {
    try {
      final credentials = SignInCredentials(email: email!, password: password!);
      final result = await widget.supabase.auth.signIn(credentials);
      setState(() {
        message = 'Signed in successfully!';
      });
    } catch (e) {
      setState(() {
        message = 'Sign in failed: ${e.message}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Form(
            key: _formKey,
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(labelText: 'Email'),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Please enter an email.';
                    }
                    return null;
                  },
                  onSaved: (value) {
                    email = value;
                  },
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: 'Password'),
                  obscureText: true,
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Please enter a password.';
                    }
                    return null;
                  },
                  onSaved: (value) {
                    password = value;
                  },
                ),
              ],
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _signUp,
            child: Text('Sign Up'),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: _signIn,
            child: Text('Sign In'),
          ),
          SizedBox(height: 20),
          Text(message ?? ''),
        ],
      ),
    );
  }
}

4. 数据库操作

以下是一个简单的插入、查询、更新和删除操作的示例:

import 'package:supabase_dart/supabase_dart.dart';

// 插入数据
void _insertData(SupabaseClient supabase) async {
  try {
    final result = await supabase
        .from('your_table_name')
        .insert({'column1': 'value1', 'column2': 'value2'})
        .execute();
    print('Inserted data: ${result.data}');
  } catch (e) {
    print('Insertion failed: ${e.message}');
  }
}

// 查询数据
void _queryData(SupabaseClient supabase) async {
  try {
    final result = await supabase.from('your_table_name').select().execute();
    print('Queried data: ${result.data}');
  } catch (e) {
    print('Query failed: ${e.message}');
  }
}

// 更新数据
void _updateData(SupabaseClient supabase) async {
  try {
    final result = await supabase
        .from('your_table_name')
        .update({'column1': 'new_value1'})
        .eq('id', 'your_row_id')
        .execute();
    print('Updated data: ${result.data}');
  } catch (e) {
    print('Update failed: ${e.message}');
  }
}

// 删除数据
void _deleteData(SupabaseClient supabase) async {
  try {
    final result = await supabase
        .from('your_table_name')
        .delete()
        .eq('id', 'your_row_id')
        .execute();
    print('Deleted data: ${result.data}');
  } catch (e) {
    print('Deletion failed: ${e.message}');
  }
}

你可以将这些函数集成到你的应用中,例如在按钮点击事件中调用它们。

总结

以上代码展示了如何在Flutter项目中使用Supabase进行数据库管理,包括用户认证和基本的CRUD操作。根据你的具体需求,你可以进一步扩展这些示例。

回到顶部