Guys I'm using file_picker to get files from the device. I use open_file to display the file. Is there any way to get the number of pages from the file? I have already seen the possibility with .pdf, but I would like to get from .docs as well.
Try Flutter FileReader
https://pub.dev/packages/flutter_filereader
A local file view widget,Support a variety of file types, such as Doc Eexcl PPT TXT and so on,Android is implemented by Tencent X5,iOS is implemented by WKWebView
import 'package:flutter/material.dart';
import 'package:flutter_filereader/flutter_filereader.dart';
class FileReaderPage extends StatefulWidget {
final String filePath;
FileReaderPage({Key: Key, this.filePath});
#override
_FileReaderPageState createState() => _FileReaderPageState();
}
class _FileReaderPageState extends State<FileReaderPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("doc"),
),
body: FileReaderView(
filePath: widget.filePath,
),
);
}
}
OR open_document
Opening pdf, xlsx, docs, ppt and zip files #
https://pub.dev/packages/open_document
Related
Currently in the company where I work, they are using Flutter, before I created the animations in After Effects, created a JSON and sent it to the developers. Now, I need to find a way in which After Affects talks to FLUTTER.
Use the lottie package. Add your JSON as an asset or host it somewhere. Then you can follow the example code(shown below) to display it.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
// Load a Lottie file from your assets
Lottie.asset('assets/LottieLogo1.json'),
// Load a Lottie file from a remote url
Lottie.network(
'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
// Load an animation and its images from a zip file
Lottie.asset('assets/lottiefiles/angel.zip'),
],
),
),
);
}
}
I'm using dart pdf library and I want to detect touch on screen while the pdf is being viewed. Is there a way to do that? For viewing the pdf file I'm using a PDFViewerScaffold with the created file's path. I tried wrapping the PDFViewerScaffold with Listener and GestureDetector, but no luck.
My code so far:
Viewing the pdf file:
class PdfViewerPage extends StatelessWidget {
final String path;
const PdfViewerPage({Key key, this.path}) : super(key: key);
#override
Widget build(BuildContext context) {
return PDFViewerScaffold(
path: path,
);
}
}
Making the pdf file:
final Document pdf = Document();
...
pdf.addPage(MultiPage(
pageFormat:
...
footer: (Context context) {
...
},
build: (Context context) => <Widget>[
...
...
Any help would be appreciated!
I had the same problem a while back, FlutterFullPdfViewer uses native component and encapsulate it in a FrameLayout(in android) that can only be manipulated through native code.
What I did is that I forked the project, and added my own implementation.
In the android part you have a method called in FlutterFullPdfViewerManager.java :
void openPDF(String path) {
File file = new File(path);
pdfView.fromFile(file)
.enableSwipe(true)
.swipeHorizontal(false)
.enableDoubletap(true)
.defaultPage(0)
.load();
}
You can change this to:
void openPDF(String path) {
File file = new File(path);
pdfView.fromFile(file)
.enableSwipe(true)
.swipeHorizontal(false)
.enableDoubletap(true)
.onTap(e-> {
if (e.getRawX() > 300) {//put your value here
//send rebuild instruction to flutter
}
.defaultPage(0)
.load();
}
Or something along these lines, you will also find that there is a lot of extra stuff that you can do on pdfView that could be helpful to you.
I want to implement a App in Flutter that allows the user to view PDF-files and select and copy the text thereinin so that I can proceed using the copied text from the Clipboard.
To be more precise I want want my Code to be somewhat like the following but with a package that allows to copy from the displayed PDF file.
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:pdf_viewer_plugin/pdf_viewer_plugin.dart';
import 'package:flutter/services.dart';
class PDFPage extends StatefulWidget {
final File file;
final Function onPressed;
const PDFPage(this.file,this.onPressed);
#override
_PDFPageState createState() => _PDFPageState();
}
class _PDFPageState extends State<PDFPage> {
#override
void initState() {
Clipboard.setData(ClipboardData(text: ''));
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: PdfViewer(
filePath: widget.file.path,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.beach_access),
onPressed: ()async{
ClipboardData data = await Clipboard.getData('text/plain');
widget.onPressed(data);
},
),
);
}
}
The package I am using here is
pdf_viewer_plugin: ^1.0.0+2
That seems not to work. It does display the PDF file but I can't select text or copy from it. I have also tried
flutter_full_pdf_viewer: ^1.0.6
advance_pdf_viewer: ^1.1.6
and some more I can't remind the name of.
Is there a package that allows me to do so, or a modest way to either modify or create such a package?
Thanks a lot.
I want to show some generated HTML in a WebView in my Flutter App.
The StatefulWidget which contains the WebView can change certain properties upon which the WebView would have to rebuild.
TL;DR: How to supply custom HTML without initialUrl?
Up to now I used the initialUrl propety of the WebView constructor to supply an URI with my HTML directly embedded:
WebView(
initialUrl: Uri.dataFromString(myHtml, mimeType: 'text/html').toString(),
)
Now I realized, I must rebuild the WebView with different values when some states get set. (Namely a dropdown above the WebView). As the name tells, this URI is just initial.
So my question is: How can I update the HTML in the WebView? Is there maybe some way to reset the internal state of the WebView?
I guess webview's api doesn't allow to do that, but you can use a workaround: just save the HTML to temp file and provide an URI to WebView using initialUrl. Here's the example:
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:webview_flutter/webview_flutter.dart';
class HomePage extends StatefulWidget {
#override
State<StatefulWidget> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Uri uri;
Future<void> _showHtml(String html) async {
final tempDir = await getTemporaryDirectory();
final path = join(tempDir.path, 'page.html');
final tempFile = File(path);
tempFile.writeAsStringSync(html);
setState(() {
uri = Uri(scheme: 'file', path: path);
});
}
#override
void initState() {
super.initState();
_showHtml('<html>Test</html>');
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SafeArea(
child: uri != null ? WebView(
initialUrl: uri.toString(),
) : Container()
),
);
}
}
You can also use onWebViewCreated callback to save webview's controller and use the controller later to load other using loadUrl method.
I wanted to ship an app with pre-populated Sqflite database(which can be modified by user).
I have added like 100 images as assets and need to read them as File Images instead of asset images (so it will easy to read & load the images in different screens, without copying the images).
So need to know how to get the file path (path will be hardcoded in sqflite databse) of images stored in Assets folder.
Push in the right direction is appreciated.
So you want to read the images from the Database and load them to the screen instead of reading them from the application assets ?. I think Flutter loads them from the application assets faster and without the overhead of the Database query.
Keep path in sqflite like 'assets/images/1.png' and access with rootBundle
You do not need absolute path such as /sdcard0/....
Keep only assets path
ByteData imageData1 = await rootBundle.load('assets/images/1.png');
Use List of ByteData to keep images
List<ByteData> imageList = [];
With ListView display image with Image.memory
return Image.memory(imageList[index].buffer.asUint8List());
full code
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
List<ByteData> imageList = [];
void _incrementCounter() async{
ByteData imageData1 = await rootBundle.load('assets/images/1.png');
ByteData imageData2 = await rootBundle.load('assets/images/2.png');
print(imageData1.toString());
imageList.add(imageData1);
imageList.add(imageData2);
setState(() {
_counter++;
print(imageList.length.toString());
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder(
itemCount: imageList.length,
itemBuilder: (context, index) {
return Image.memory(imageList[index].buffer.asUint8List());
},
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
I also encountered this situation since I wanted to prepopulate my Hive database with images stored in assets and my app uses FileImage to load the images.
I found out that you can't reference a file or an image path located in Assets since it is ever changing, so better yet:
Load the image/file using rootBundle.load
Duplicate the image/file using writeAsBytesSync
Use the path of the duplicated image and load it from there
reference
You can also use Device File Explorer in Android Studio to inspect where the assets folder is located and see for yourself if it is changing. In my experience it is located in code_cache > build > flutter_assets > assets.