Flutter文件预览插件in_app_file_view的使用

Flutter文件预览插件in_app_file_view的使用

📄 In-App File View for Flutter

一个专门为iOS设计的Flutter插件，用于在应用内部轻松查看各种文件类型（如PDF、DOC、PPT、Excel、图片等）。通过无缝集成和用户友好的界面，该插件确保了流畅且优化的文件查看体验。

iOS实现利用了WKWebView来实现高性能的文件渲染。

✨ 特性概览

📂 广泛的文件类型支持

轻松查看以下流行的文件格式：

• 文档：DOCX、DOC、TXT
• 演示文稿：PPTX、PPT
• 电子表格：XLSX、XLS
• PDF文件：PDF
• 图像：PNG、JPG、JPEG、HEIC、GIF

🚀 原生集成

使用原生iOS代码构建，提供优雅、响应迅速且可靠的文件查看体验。

🛠️ 性能优化

所有支持的文件类型均能快速加载和流畅渲染。

💡 用户友好设计

简洁现代的界面以增强用户体验。

🎯 为什么选择In-App File View？

告别打开外部应用的麻烦！使用In-App File View，您的用户可以直接在应用内查看多种类型的文件。无论是构建生产力工具、教育应用还是文件共享平台，此插件都是理想之选。

📖 入门指南

1. 将插件添加到项目中

在pubspec.yaml文件中包含插件：

dependencies:
  in_app_file_view: 1.1.1

示例代码

example/lib/main.dart

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

import 'page_file_view.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

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

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('文件查看')),
      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,
        );
      },
    );
  }
}

example/lib/page_file_view.dart

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

class FileViewPage extends StatelessWidget {
  final FileViewController controller;

  const FileViewPage({Key? key, required this.controller}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('文件查看'),
      ),
      body: FileView(
        controller: controller,
      ),
    );
  }
}