Flutter File View

pub package

Language: 中文 | English

At present, the plugin is only used by Android, iOS

  • You can use LocalFileViewer to preview local files.
  • You can use NetworkFileViewer to download the network link and preview the file in combination with LocalFileViewer.

Use of third-party plugins

  • Use dio to make network requests.
  • It is recommended to use getTemporaryDirectory() as the target path, which can be implemented using the path_provider plugin.

Preparing for use

Version constraints

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

Rely

  1. Add flutter_file_view to pubspec.yaml dependencies.
dependencies:
  flutter_file_view: ^latest_version
  1. Get the package by executing the flutter command.
flutter pub get
  1. Introduce
import 'package:flutter_file_view/flutter_file_view.dart';

Localized configuration

Add in MaterialApp.

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

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

iOS

Make sure you add the following key to Info.plist for iOS

<key>io.flutter.embedded_views_preview</key><true/>

Android

Android P Unable to download kernel Solution

Add a piece of code in label application on AndroidManifst.xml file

android:networkSecurityConfig="@xml/network_security_config"

Add a file named network_security_config.xml in res/xml directory, The content of the file is

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

Local File Preview - LocalFileViewer

Supported file type

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

Usage

NameTypeDescriptionDefault
filePathStringPath to local fileRequired
placeholderWidget?Widget displayed while the target filePath is loading.CupertinoActivityIndicator(radius: 14.0)
unsupportedPlatformWidgetWidget?Widget displayed on unsupported platformsCenter(child: Text(ViewerLocalizations.of(context).unsupportedPlatformTip))
nonExistentWidgetWidget?Widget displayed while the file with path filePath does not existCenter(child: Text(ViewerLocalizations.of(context).nonExistentTip))
unsupportedTypeWidgetWidgetWidget displayed while the file is of an unsupported file typesCenter(child: Text(ViewerLocalizations.of(context).unsupportedType))
isBarShowboolParameter is_bar_show of TbsReaderView.openFilefalse
intoDownloadingboolParameter into_downloading of TbsReaderView.openFilefalse
isBarAnimatingboolParameter is_bar_animating of TbsReaderView.openFilefalse

Android special notes

  • The X5 kernel loading method has been integrated in the plugin.
  • Get the current kernel loading status through getX5Status().
  • It can be initialized by itself through initX5() . It is mainly used to solve the problem of unsuccessful download.
  • Through the following scheme, kernel load listening can be realized after initX5() call.
FlutterFileView.initController.listen((res) {
  EX5Status ex5status = res;
  print(ex5status);
});

READ

  • Not Support Google Play, Reason: Issues 1.11.
  • Running on Android emulator is not supported.

Network Link Preview - NetworkFileViewer

A network link view which based on the WeChat’s UI, with download function and view click effect.

Usage

NameTypeDescriptionDefault
downloadUrlStringDownload link for fileRequired
downloadPathStringThe file storage address is used to determine whether the file can be downloadedRequired
onViewPressedVoidCallbackFile viewing functionRequired
placeholderWidget?Widget displayed while the target downloadUrl is loading.CupertinoActivityIndicator(radius: 14.0)
fileSizeDatadynamicParameter data of FlutterFileView.getFileSizenull
fileSizeQueryParametersMap<String, dynamic>?Parameter queryParameters of FlutterFileView.getFileSizenull
fileSizeOptionsOptions?Parameter options of FlutterFileView.getFileSizenull
fileSizeTipString?Parameter fileSizeTip of FlutterFileView.getFileSizeViewerLocalizations.of(context).fileSizeTip
fileSizeFailTipString?Parameter fileSizeFailTip of FlutterFileView.getFileSizeViewerLocalizations.of(context).fileSizeFailTip
fileSizeErrorTipString?Parameter fileSizeErrorTip of FlutterFileView.getFileSizeViewerLocalizations.of(context).fileSizeErrorTip
downloadQueryParametersMap<String, dynamic>?Parameter queryParameters of FlutterFileView.downloadFilenull
downloadDeleteOnErrorbool?Parameter deleteOnError of FlutterFileView.downloadFiletrue
downloadLengthHeaderString?Parameter lengthHeader of FlutterFileView.downloadFileHeaders.contentLengthHeader
downloadDatadynamicParameter data of FlutterFileView.downloadFilenull
downloadOptionsOptions?Parameter options of FlutterFileView.downloadFilenull
fileNameStyleTextStyle?The style of the displayed file nameTheme.of(context).textTheme.bodyText1?.copyWith(fontWeight:FontWeight.bold)
fileSizeStyleTextStyle?The style of the displayed file sizeTheme.of(context).textTheme.bodyText2
downloadTitleString?Button title when downloadableViewerLocalizations.of(context).downloadTitle
viewTitleString?Button title when viewableViewerLocalizations.of(context).viewTitle
buttonStyleButtonStyle?Button styleSee source file
btnTitleColorColor?The color of the text of the buttonColors.white
btnBgColorColor?The color of the button's backgroundTheme.of(context).primaryColor
progressSizedouble?Size of CircularProgressIndicator60.0
progressStrokeWidthdouble?strokeWidth of CircularProgressIndicator6.0
progressBackgroundColorColor?Background color of CircularProgressIndicatorTheme.of(context).primaryColor
progressValueColorColor?The value color of CircularProgressIndicatorColors.tealAccent

Future Plans

  • Realize online viewing of network links. At present, NetworkFileViewer can be used to view after downloading.
  • Consider removing the onViewPressed function of NetworkFileViewer and providing additional events for opening files that cannot be previewed.

Other Api

  • Convert file size through fileSize().
  • Download network files through downloadFile().
  • Get the network file size through getFileSize().

If you like my project, please in the upper right corner of the project "Star". Your support is my biggest encouragement! ^_^

Libraries

flutter_file_view