PowerFileView - A powerful file view widget, support a variety of file types, such as Doc Eexcl PPT TXT PDF and so on, Android is implemented by Tencent X5, iOS is implemented by WKWebView.

Overview

PowerFileView

pub package

English | 简体中文

A local file preview plugin, using PowerFileView, you can preview doc, docx, ppt, pptx, xls, xlsx, pdf and other files as easily as android and ios.

illustrate

  • Android uses Tencent TBS service, supports preview of doc, docx, ppt, pptx, xls, xlsx, pdf, txt, epub files
  • ios uses WKWebView, all supported by WKWebView can be previewed

Supported formats

Format android ios
.doc
.docx
.ppt
.pptx
.xls
.xlsx
.pdf

Integration

1. Dependency

Add under the pubspec.yaml file:

power_file_view: ^1.0.0

2. Quick integration

1. Android

Since using android to use TBS service, network permission and storage permission are required. Add the following permissions to the AndroidManifest file of Android.

">
    
    
    
    

In order to prevent the release version from failing to load the TBS kernel library. Add the following code to the obfuscation file proguard-rules.pro.

-dontwarn dalvik.**
-dontwarn com.tencent.smtt.**

-keep class com.tencent.smtt.** {
    *;
}

-keep class com.tencent.tbs.** {
    *;
}

Then enable delete useless resources in build.gradle, which can be configured as shown in the following figure

buildTypes {
        release {
            //Close delete useless resources
            shrinkResources false
            //Close delete useless code
            minifyEnabled false
            zipAlignEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

2. TBS initialization

Since android uses the TBS service, it needs to be initialized before use, which takes about 3-30 seconds.

  1. Asynchronous initialization (recommended)

Asynchronous initialization can be performed under the main function of the app's main.dart file, so that the user does not need to wait for TBS initialization when opening the file.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  PowerFileViewManager.initEngine();
  runApp(const MyApp());
}
  1. Initialize when opening

If the asynchronous initialization configuration is not performed, the initialization operation will be performed automatically before the file is opened, and the user does not need to configure

4. Quick use

file preview

  1. Network files: Just pass in the downloadUrl of the file to be previewed and the downloadPath of the storage path of the file to download.
define downloadPath
  import 'package:path_provider/path_provider.dart';
  ...
  final _directory = await getTemporaryDirectory();
  final downloadPath = "${_directory.path}/fileview/"fileName.pdf";//Set a name you like
  1. Local file: Just pass in the downloadPath of the path where the local file is located.
class PowerFileViewPage extends StatefulWidget {
  final String downloadUrl;
  final String downloadPath;

  const PowerFileViewPage({Key? key, required this.downloadUrl, required this.downloadPath}) : super(key: key);

  @override
  State createState() => _PowerFileViewPageState();
}

class _PowerFileViewPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('File Preview'),
      ),
      body: PowerFileViewWidget(
        downloadUrl: widget.downloadUrl,
        filePath: widget.downloadPath,
      ),
    );
  }
}

Custom progress display and error display

You can customize the display style of progress loading and the display style of errors in loadingBuilder and errorBuilder.

 PowerFileViewWidget(
        downloadUrl: widget.downloadUrl,
        filePath: widget.downloadPath,
        loadingBuilder: (viewType, progress) {
          return Container(
            color: Colors.grey,
            alignment: Alignment.center,
            child: Text("Loading: $progress"),
          );
        },
        errorBuilder: (viewType) {
          return Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text("Something went wrong!!!!"),
          );
        },
      ),

5. HTTP configuration (optional)

If you need to use plaintext download, you need to configure the following

1. android

Create a new network_config.xml under android/app/src/main/res/xml

">


    

and configure in android/app/src/main/AndroidManifest.xml

">

2. iOS

Make sure to add the following keys in ios/Runner/Info.plist

 NSAppTransportSecurity
        
            NSAllowsArbitraryLoads
            
        
You might also like...

A widget to provides horizontal or vertical multiple split view for Flutter.

A widget to provides horizontal or vertical multiple split view for Flutter.

Multi split view A widget to provides horizontal or vertical multiple split view for Flutter. Horizontal or vertical Configurable weight or size for e

Dec 28, 2022

A widget with side-by-side source code view.

A widget with side-by-side source code view.

A widget with side-by-side source code view. Extracted from the flutter-catalog open-source app.

Aug 29, 2022

Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

Jan 6, 2023

A Flutter Text widget support word break for CJK

A Flutter Text widget support word break for CJK

word_break_text Text widget with word break support for CJK sentence. Installation Add flutter_map to your pubspec: dependencies: word_break_text:

Nov 11, 2022

Plugin to the JSON Dynamic Widget to provide named support for Ionicons

json_dynamic_widget_plugin_ionicons Table of Contents Live Example Introduction Using the Plugin Live Example Web Introduction Plugin to the JSON Dyna

May 14, 2022

A Flutter Country Picker Widget with support to country dialing codes

A Flutter Country Picker Widget with support to country dialing codes

flutter_country_picker A Flutter Country Picker Widget with support to country dialing codes Usage Add the CountryPicker widget in your layout and use

Apr 6, 2022

Powerful Complete and Beautiful Search Component for Flutter

Powerful Complete and Beautiful Search Component for Flutter

A highly customizable search component to accelerate your development. Overview There are many search or search components for Flutter, however this o

Jul 27, 2022

Flutter package: Easy and powerful internationalization using Dart extensions.

Flutter package: Easy and powerful internationalization using Dart extensions.

i18n_extension Non-boilerplate Translation and Internationalization (i18n) for Flutter Start with a widget with some text in it: Text("Hello, how are

Dec 29, 2022

SKAlertDialog - A highly customizable, powerful and easy-to-use alert dialog for Flutter.

 SKAlertDialog - A highly customizable, powerful and easy-to-use alert dialog for Flutter.

SKAlertDialog A highly customizable, powerful and easy-to-use alert dialog for Flutter. GIF Screenshots SKAlertDialog Basic Alert Alert with buttons A

May 18, 2022
Comments
Owner
Yao
Yao
Build a grouped list, which support expand/collapse section and sticky headers, support use it with sliver widget.

sticky_and_expandable_list Flutter implementation of sticky headers and expandable list.Support use it in a CustomScrollView. README i18n:中文说明 Feature

tp7309 114 Nov 16, 2022
Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Hugo Delaunay 196 Dec 2, 2022
Flutter reaction button plugin it is fully customizable widget such as Facebook reaction button

Flutter Reaction Button Flutter button reaction it is fully customizable widget such as Facebook reaction button. Preview Demo Usage Include 'flutter_

Abdelouahed Medjoudja 174 Dec 19, 2022
Similar to Weibo dynamics, WeChat circle of friends, nine grid view controls to display pictures. Support single big picture preview.

Similar to Weibo dynamics, WeChat circle of friends, nine grid view controls to display pictures. Support single big picture preview.

Flutter中国开源项目 296 Dec 28, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

flutter_donation_buttons Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more. Getting S

null 6 Dec 10, 2022
An advanced flutter package to build responsive application accross all platform with ease and has an handful of different types of extension

Flutter Next Now build flutter apps with ease and responsive. An advanced flutter package to build responsive application accross all platform with ea

Shashi Kumar 10 Dec 29, 2022
Flutter progress dialog. Support both Android and iOS platform.

Flutter Progress Dialog [pub packages] | Flutter progress dialog. Support both Android and iOS platform

Dylan Wu 22 Oct 9, 2022
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
A Flutter widget which synchronize a ScrollView and a custom tab view

scrollable_list_tabview A Flutter widget which synchronize a ScrollView and a custom tab view. The main idea is to create a custom tab view synchroniz

Aswanath C K 0 Apr 12, 2022