Flutter文件保存插件document_file_save_plus的使用

Flutter文件保存插件document_file_save_plus的使用

document_file_save_plus 是一个用于在Flutter应用程序中保存文件的插件。它支持将字节数据保存到Android的下载文件夹或在iOS上显示保存对话框,允许保存任何类型的文件(例如.txt、.png、.jpg、.pdf等)。

安装插件

在项目的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  document_file_save_plus: ^1.0.4

然后运行 flutter pub get 来安装插件。

权限设置

Android

  • 如果你的项目目标是Android Q及以上版本,则不需要额外添加权限。

  • 对于低于Android Q的目标版本,需要在 AndroidManifest.xml 中添加如下权限声明:

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    

iOS

  • 不需要特别设置权限。

函数描述

  • 单个文件保存:如果要保存单个文件,请调用 saveFile 方法。

    void saveFile(Uint8List data, String fileName, String mimeType)
    
  • 多个文件保存:如果有多个文件需要保存,可以调用 saveMultipleFiles 方法,iOS会仅显示一次保存对话框。

    void saveMultipleFiles(List<Uint8List> dataList, List<String> fileNameList, List<String> mimeTypeList)
    

示例代码

下面是一个完整的示例应用,演示如何使用 document_file_save_plus 插件来保存文件。

import 'dart:typed_data';
import 'package:document_file_save_plus/document_file_save_plus.dart';
import 'package:flutter/material.dart';
import 'dart:convert';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    // 初始化时尝试保存文件
    _saveFile();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('document_file_save_plus Plugin'),
        ),
        body: const Center(
          child: Text(
            'Please check file in Download folder (or Files App in iOS)',
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _saveFile,
          tooltip: 'Save File',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }

  void _saveFile() async {
    // 编码一些简单的HTML和纯文本内容为字节数组
    List<int> htmlBytes = utf8.encode("<h1>Header 1</h1><p>This is sample text</p>");
    List<int> textBytes = utf8.encode("Some data");
    
    // 将字节数组转换为Uint8List类型
    Uint8List htmlBytes1 = Uint8List.fromList(htmlBytes);
    Uint8List textBytes1 = Uint8List.fromList(textBytes);

    // 保存多个文件
    await DocumentFileSavePlus().saveMultipleFiles(
      dataList: [htmlBytes1, textBytes1],
      fileNameList: ["htmlfile.html", "textfile.txt"],
      mimeTypeList: ["text/html", "text/plain"],
    );

    // 如果想保存单个文件,可以取消注释并使用下面的代码:
    // await DocumentFileSave.saveFile(htmlBytes1, "my_test_html_file.html", "text/html");

    // 提示用户查看保存的文件
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Files have been saved! Check your downloads folder or Files app on iOS.')),
    );
  }
}

在这个例子中,当应用启动时会自动尝试保存两个文件到设备中,并且用户点击浮动按钮也可以触发文件保存操作。根据平台的不同,文件会被保存到不同的位置——在Android上是下载文件夹,在iOS上则是通过系统文件选择器保存。

请注意,实际开发中应当处理可能发生的异常情况,并根据业务逻辑调整UI提示信息。


更多关于Flutter文件保存插件document_file_save_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文件保存插件document_file_save_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用document_file_save_plus插件来保存文件的示例代码。document_file_save_plus插件允许你在Android和iOS设备上保存文件到用户的设备存储中。

首先,确保你已经在pubspec.yaml文件中添加了依赖项:

dependencies:
  flutter:
    sdk: flutter
  document_file_save_plus: ^x.y.z  # 请使用最新版本号

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

接下来是一个完整的示例代码,展示了如何使用document_file_save_plus插件来保存文本文件:

import 'package:flutter/material.dart';
import 'package:document_file_save_plus/document_file_save_plus.dart';
import 'dart:typed_data/typed_data.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SaveFileScreen(),
    );
  }
}

class SaveFileScreen extends StatefulWidget {
  @override
  _SaveFileScreenState createState() => _SaveFileScreenState();
}

class _SaveFileScreenState extends State<SaveFileScreen> {
  String? _filePath;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Save File Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Tap the button to save a file.'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _saveFile,
              child: Text('Save File'),
            ),
            if (_filePath != null)
              Text('File saved at: $_filePath'),
          ],
        ),
      ),
    );
  }

  void _saveFile() async {
    try {
      // 要保存的文本内容
      String content = 'Hello, this is a test file content!';
      
      // 将文本内容转换为Uint8List
      Uint8List uint8list = Uint8List.fromList(content.codeUnits);
      
      // 定义文件名称和扩展名
      String fileName = 'example.txt';
      
      // 使用document_file_save_plus保存文件
      var result = await DocumentFileSavePlus.saveFile(
        fileName: fileName,
        bytes: uint8list,
        extension: 'txt',
      );
      
      // 检查保存结果
      if (result != null) {
        setState(() {
          _filePath = result.path;
        });
      } else {
        print('File saving failed.');
      }
    } catch (e) {
      print('Error saving file: $e');
    }
  }
}

代码解释:

  1. 依赖项:在pubspec.yaml文件中添加document_file_save_plus依赖项。

  2. UI结构:使用MaterialAppScaffold构建了一个简单的用户界面,包含一个按钮和一个用于显示文件保存路径的文本。

  3. 保存文件逻辑

    • 使用ElevatedButtononPressed回调方法触发文件保存操作。
    • 将要保存的文本内容转换为Uint8List
    • 使用DocumentFileSavePlus.saveFile方法保存文件,并指定文件名和扩展名。
    • 如果文件保存成功,将文件路径保存到_filePath变量中,并使用setState方法更新UI。
  4. 错误处理:捕获并打印任何可能发生的错误。

这样,你就可以在你的Flutter应用中使用document_file_save_plus插件来保存文件了。确保在实际项目中处理更多的边界情况和用户交互,以提供更好的用户体验。

回到顶部