Flutter本地存储管理插件storage_client的使用

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

Flutter本地存储管理插件storage_client的使用

storage_client 是一个用于与Supabase Storage交互的Dart客户端库。它可以帮助开发者轻松地在Flutter应用中实现文件上传、下载和删除等操作。本文将详细介绍如何使用storage_client进行这些操作,并提供完整的示例代码。

文档

示例代码

以下是一个完整的示例,展示了如何使用storage_client进行文件上传、下载和删除操作。请确保您已经安装了storage_client包,并且已经在Supabase上创建了一个项目并获取了API密钥。

1. 添加依赖

首先,在您的pubspec.yaml文件中添加storage_client依赖:

dependencies:
  flutter:
    sdk: flutter
  storage_client: ^0.2.0

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

2. 初始化客户端

在您的Dart文件中导入必要的库,并初始化SupabaseStorageClient

import 'dart:io';
import 'dart:typed_data';

import 'package:storage_client/storage_client.dart';

void main() async {
  const supabaseUrl = 'https://your-supabase-url.supabase.co'; // 替换为您的Supabase URL
  const supabaseKey = 'your-supabase-key'; // 替换为您的Supabase API密钥
  final client = SupabaseStorageClient(
    '$supabaseUrl/storage/v1',
    {
      'Authorization': 'Bearer $supabaseKey',
    },
  );

  // ...后续操作
}

3. 文件上传

上传二进制文件

您可以将字符串或任何二进制数据上传到Supabase Storage:

// 上传二进制文件
final List<int> listBytes = 'Hello world'.codeUnits;
final Uint8List fileData = Uint8List.fromList(listBytes);
final uploadBinaryResponse = await client.from('public').uploadBinary(
      'binaryExample.txt',
      fileData,
      fileOptions: const FileOptions(upsert: true),
    );
print('upload binary response : $uploadBinaryResponse');

上传文件到指定桶

您还可以上传本地文件到指定的桶(例如public):

// 上传文件到 bucket "public"
final file = File('example.txt');
file.writeAsStringSync('File content');
final storageResponse =
    await client.from('public').upload('example.txt', file);
print('upload response : $storageResponse');

4. 获取下载链接

通过创建签名URL来获取文件的下载链接:

// 获取下载链接
final urlResponse =
    await client.from('public').createSignedUrl('example.txt', 60); // 60秒有效期
print('download url : $urlResponse');

5. 下载文件

您可以直接从Supabase Storage下载文件内容:

// 下载文本文件
try {
  final fileResponse = await client.from('public').download('example.txt');
  print('downloaded file : ${String.fromCharCodes(fileResponse)}');
} catch (error) {
  print('Error while downloading file : $error');
}

6. 删除文件

最后,您可以删除不再需要的文件:

// 删除文件
final deleteResponse = await client.from('public').remove(['example.txt']);
print('deleted file id : ${deleteResponse.first.id}');

7. 清理本地文件

如果您在本地创建了临时文件,请记得在操作完成后清理它们:

// 清理本地文件
if (file.existsSync()) file.deleteSync();

完整示例代码

以下是完整的示例代码,包含了所有上述操作:

// ignore_for_file: avoid_print

import 'dart:io';
import 'dart:typed_data';

import 'package:storage_client/storage_client.dart';

Future<void> main() async {
  const supabaseUrl = 'https://your-supabase-url.supabase.co'; // 替换为您的Supabase URL
  const supabaseKey = 'your-supabase-key'; // 替换为您的Supabase API密钥
  final client = SupabaseStorageClient(
    '$supabaseUrl/storage/v1',
    {
      'Authorization': 'Bearer $supabaseKey',
    },
  );

  // 上传二进制文件
  final List<int> listBytes = 'Hello world'.codeUnits;
  final Uint8List fileData = Uint8List.fromList(listBytes);
  final uploadBinaryResponse = await client.from('public').uploadBinary(
        'binaryExample.txt',
        fileData,
        fileOptions: const FileOptions(upsert: true),
      );
  print('upload binary response : $uploadBinaryResponse');

  // 上传文件到 bucket "public"
  final file = File('example.txt');
  file.writeAsStringSync('File content');
  final storageResponse =
      await client.from('public').upload('example.txt', file);
  print('upload response : $storageResponse');

  // 获取下载链接
  final urlResponse =
      await client.from('public').createSignedUrl('example.txt', 60);
  print('download url : $urlResponse');

  // 下载文本文件
  try {
    final fileResponse = await client.from('public').download('example.txt');
    print('downloaded file : ${String.fromCharCodes(fileResponse)}');
  } catch (error) {
    print('Error while downloading file : $error');
  }

  // 删除文件
  final deleteResponse = await client.from('public').remove(['example.txt']);
  print('deleted file id : ${deleteResponse.first.id}');

  // 清理本地文件
  if (file.existsSync()) file.deleteSync();
}

通过以上步骤,您可以在Flutter应用中轻松地使用storage_client插件进行文件的上传、下载和删除操作。希望这对您有所帮助!


更多关于Flutter本地存储管理插件storage_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter本地存储管理插件storage_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用storage_client插件进行本地存储管理的示例代码。请注意,由于storage_client可能不是一个广为人知的Flutter插件,这里假设它提供基本的读写功能,类似于shared_preferenceshive等插件。如果storage_client的具体API有所不同,请根据实际文档进行调整。

首先,确保在pubspec.yaml文件中添加storage_client依赖:

dependencies:
  flutter:
    sdk: flutter
  storage_client: ^x.y.z  # 请替换为实际版本号

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

接下来,在你的Flutter应用中,你可以按照以下步骤使用storage_client进行本地存储管理:

1. 导入插件

在你需要使用存储功能的Dart文件中导入插件:

import 'package:storage_client/storage_client.dart';

2. 初始化存储客户端

通常,你需要在应用启动时初始化存储客户端。这里假设storage_client提供了一个初始化方法。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化存储客户端
  final StorageClient storage = await StorageClient.init();
  
  runApp(MyApp(storage: storage));
}

3. 使用存储客户端读写数据

在你的Flutter组件或逻辑中,你可以使用存储客户端来读写数据。以下是一个简单的示例,展示如何读写一个字符串值。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  final StorageClient storage = await StorageClient.init();
  
  runApp(MyApp(storage: storage));
}

class MyApp extends StatelessWidget {
  final StorageClient storage;

  MyApp({required this.storage});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Storage Client Demo'),
        ),
        body: StorageDemo(storage: storage),
      ),
    );
  }
}

class StorageDemo extends StatefulWidget {
  final StorageClient storage;

  StorageDemo({required this.storage});

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

class _StorageDemoState extends State<StorageDemo> {
  final String _key = 'example_key';
  String? _value;

  @override
  void initState() {
    super.initState();
    // 从存储中读取数据
    _readValue();
  }

  Future<void> _readValue() async {
    String? value = await widget.storage.readString(_key);
    setState(() {
      _value = value ?? 'No value found';
    });
  }

  Future<void> _writeValue(String value) async {
    await widget.storage.writeString(_key, value);
    setState(() {
      _value = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('Stored Value:', style: TextStyle(fontSize: 20)),
          SizedBox(height: 8),
          Text(_value ?? '', style: TextStyle(fontSize: 18)),
          SizedBox(height: 24),
          ElevatedButton(
            onPressed: () async {
              final String newValue = 'New Value at ${DateTime.now()}';
              await _writeValue(newValue);
            },
            child: Text('Write Value'),
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个文本显示存储的值和一个按钮用于更新存储的值。StorageClient被用来读写一个字符串值。

注意

  • 实际的storage_client插件可能有不同的API,所以请查阅其官方文档以获取准确的使用方法和API。
  • 如果storage_client不支持异步初始化或读写操作,请相应调整代码。
  • 如果storage_client没有提供readStringwriteString方法,你可能需要使用其他类似的方法,如getset

希望这个示例对你有所帮助!如果有更多具体需求或问题,请随时提出。

回到顶部