Flutter数据存储插件katana_storage的使用

Katana Storage

[GitHub] | [YouTube] | [Packages] | [Twitter] | [Threads] | [LinkedIn] | [mathru.net]

简介

文件上传功能在各种应用程序中都被广泛使用。

例如，社交网络和匹配应用可以通过上传图像文件来促进沟通。

有许多云服务允许您上传文件并使其可供您的应用程序使用，但如果您正在使用Flutter和Firestore，Firebase Storage可能是您的最佳选择。

该包实现了一个包，可以使用类似于katana_model中实现的适配器在Firebase和本地文件存储之间切换。

安装

导入以下包：

flutter pub add katana_storage

如果您使用的是Firebase Storage，请同时导入以下包：

flutter pub add katana_storage_firebase

实现

准备工作

始终将StorageAdapterScope小部件放置在应用程序根部附近。

作为参数传递一个如LocalStorageAdapter的StorageAdapter。

// main.dart
import 'package:flutter/material.dart';
import 'package:katana_storage/katana_storage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return StorageAdapterScope(
      adapter: const LocalStorageAdapter(),
      child: MaterialApp(
        home: const StoragePage(),
        title: "Flutter Demo",
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
      ),
    );
  }
}

创建存储对象

首先为每个文件创建一个Storage对象。

在创建时传递描述远程相对路径的StorageQuery。

由于Storage对象继承自ChangeNotifier，可以与addListener和riverpod的ChangeNotifierProvider一起使用以监控其状态。

final storage = Storage(const StorageQuery("test/file"));

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

  @override
  State<StatefulWidget> createState() => StoragePageState();
}

class StoragePageState extends State<StoragePage> {
  final storage = Storage(const StorageQuery("test/file"));
  final controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    storage.addListener(_handledOnUpdate);
  }

  void _handledOnUpdate() {
    setState(() {});
  }

  @override
  void dispose() {
    super.dispose();
    storage.removeListener(_handledOnUpdate);
    storage.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("App Demo")),
      body: TextField(
        controller: controller,
        expands: true,
        textAlignVertical: TextAlignVertical.top,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final text = controller.text;
          final bytes = Uint8List.fromList(text.codeUnits);
          await storage.uploadWithBytes(bytes);
        },
        child: const Icon(Icons.upload_file),
      ),
    );
  }
}

上传文件

以下是执行上传的方法：

• upload：通过指定本地文件路径上传文件。
• uploadWithBytes：通过传递字节数据直接上传。

返回值是一个StorageValue，其中存储了上传文件的远程完整路径。

final bytes = Uint8List.fromList(text.codeUnits);
final storageValue = await storage.uploadWithBytes(bytes);
print("Remote path is: ${storageValue.remote.path}");

下载文件

要下载已经上传到存储中的文件，使用download方法。

也可以指定一个相对路径，作为要保存到本地的文件的参数。

返回值是一个StorageValue，其中存储了下载文件的本地完整路径和实际数据。

在Web上不支持保存到本地文件。

final bytes = Uint8List.fromList(text.codeUnits);
final storageValue = await storage.download("file.jpg");
print("Local path is: ${storageValue.local.path}");
print("Local data is: ${storageValue.local.bytes}");