Flutter文件查看插件flutter_file_view的使用

语言: 中文 | English

当前插件仅适用于Android和iOS。

Android由Tencent X5实现。

iOS由WKWebView实现。

✅ 支持的文件类型

• Android docx, doc, xlsx, xls, pptx, ppt, pdf, txt
• iOS docx, doc, xlsx, xls, pptx, ppt, pdf, txt

⏰ 初始化

在应用启动时初始化插件：

FlutterFileView.init();

💼 2.0.x -> 2.1.0 版本更新

过期方案

@override
Widget build(BuildContext context) {
  return LocalFileViewer(filePath: localPath ?? '');
}

当前方案

@override
Widget build(BuildContext context) {
  return FileView(
    controller: FileViewController.asset('assets/files/$filePath'),
  );
}

FileViewController还有许多其他用法，例如表示某些状态等。

📲 使用第三方插件

使用dio进行网络请求。

⏳ 准备使用

版本约束

sdk: ">=2.14.0 <3.0.0"
flutter: ">=2.5.0"

依赖

1. 在pubspec.yaml中添加flutter_file_view依赖：

dependencies:
  flutter_file_view: ^latest_version

1. 执行以下命令获取包：

flutter pub get

1. 引入包：

import 'package:flutter_file_view/flutter_file_view.dart';

本地化配置

在MaterialApp中添加：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      localizationsDelegates: const <LocalizationsDelegate<dynamic>>[
        ...
        ViewerLocalizationsDelegate.delegate,
      ],
      ...
    );
  }
}

🤖 Android

Android P 无法下载内核解决方案

在AndroidManifest.xml文件的application标签中添加以下代码：

android:networkSecurityConfig="@xml/network_security_config"
android:usesCleartextTraffic="true"

在res/xml目录下创建一个名为network_security_config.xml的文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

注意事项

• 后续TBS升级不会执行。详情请参阅TBS文档接口问题说明。
• 不支持Google Play，原因见Issues 1.11。
• 不支持在Android模拟器上运行。

示例Demo

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_file_view/flutter_file_view.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      localizationsDelegates: <LocalizationsDelegate<dynamic>>[
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        FileViewLocalizationsDelegate.delegate,
      ],
      supportedLocales: <Locale>[Locale('en', 'US'), Locale('zh', 'CN')],
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> files = [
    'FileTest.docx',
    'FileTest.doc',
    'FileTest.xlsx',
    'FileTest.xls',
    'FileTest.pptx',
    'FileTest.ppt',
    'FileTest.pdf',
    'FileTest.txt',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('File View')),
      body: _buildBodyWidget(),
    );
  }

  Widget _buildBodyWidget() {
    return ListView.builder(
      itemCount: files.length,
      itemBuilder: (BuildContext context, int index) {
        final String filePath = files[index];
        String fileShowText = '';

        final int i = filePath.lastIndexOf('/');
        if (i <= -1) {
          fileShowText = filePath;
        } else {
          fileShowText = filePath.substring(i + 1);
        }

        final Widget child = ElevatedButton(
          onPressed: () {
            FileViewController? controller;

            if (filePath.contains('http://') || filePath.contains('https://')) {
              controller = FileViewController.network(filePath);
            } else {
              controller = FileViewController.asset('assets/files/$filePath');
            }

            Navigator.of(context).push(
              MaterialPageRoute<void>(
                builder: (_) => FileViewPage(controller: controller!),
              ),
            );
          },
          child: Text(fileShowText),
        );

        return Container(
          margin: const EdgeInsets.only(top: 10),
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: child,
        );
      },
    );
  }
}

如果你喜欢这个项目，请在项目的右上角点击“Star”。你的支持是我最大的鼓励！^_^

以上是关于Flutter文件查看插件`flutter_file_view`的使用指南和完整示例代码。希望对你有所帮助！