Is there a way to detect touch in pdf using flutter? - flutter

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.

Related

How to preview pdf in Scaffold - Flutter

I'm using the flutter pdf producer package and I'm trying to preview or display it in the scaffold but so far unable to do it
package link : https://pub.dev/packages/pdf
here is my code
class _PreviewInvoiceState extends State<PreviewInvoice> {
// pdf producer
void makePdf(){
final document = pw.Document();
document.addPage(
pw.Page(
pageFormat: PdfPageFormat.a4,
build: (pw.Context context) {
return pw.Center(child: pw.Text('hello world'));
}
)
);
}
#override
Widget build(BuildContext context) {
return Scaffold(); // trying to display it in the scaffold body property
}
}
The pdf package is for creating pdf. To view it you have to save it to storage with
// On Flutter, use the [path_provider](https://pub.dev/packages/path_provider) library:
// final output = await getTemporaryDirectory();
// final file = File("${output.path}/example.pdf");
final file = File("example.pdf");
await file.writeAsBytes(await pdf.save());
And to view you have to use package like pdf_viewer_flutter.

Is it possible to get the number of pages from a File?

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

Is it possible in Flutter to know which page of PDF the user is currently scroll to?

I need to make a mobile interface where user can download attached PDF (if it isn't downloaded yet) and open it on the screen. The requirement is, if the user close the PDF midway reading, for example, the user close the PDF when they scroll at page 7, then on subsequent opening the PDF, I have to instantly scroll the user to page 7, so they can start where they left.
I already have the answer for opening PDF at a specific initial page at here. I haven't tried that solution at the moment.
But now all left is to detect at what page the user closes the PDF. I searched around, but can't seem to find even any discussion or question about it. Can somebody help?
Simply call pdfController.page to get the current page:
class PDFPage extends StatefulWidget {
final int initialPage;
final String filePath;
const PDFPage({Key key, this.initialPage, this.filePath}) : super(key: key);
#override
_PDFPageState createState() => _PDFPageState();
}
class _PDFPageState extends State<PDFPage> {
PdfController pdfController;
#override
void initState() {
super.initState();
pdfController = PdfController(
document: PdfDocument.openFile(widget.filePath),
initialPage: widget.initialPage ?? 1,
);
}
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
// save current page here
await savePageForPDF(widget.filePath, pdfController.page);
return true;
},
child: Scaffold(
body: PdfView(
controller: pdfController,
scrollDirection: Axis.vertical,
),
),
);
}
savePageForPDF(String filePath, int page) {...}
}

How to open a PDF file in a Flutter App and have a selectable view?

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.

How to add a new html element through widget?

I'm trying to find a widget that can insert new video html.
It is for flutter web. I have javascript running in a website. Now I'm trying to reuse the javascipt in a website using flutter. dart:js package is used to invoke JS functions. Those JS functions manipulate two video element in a web page. So I need to create a widget that inserts video element. Below is the code for the video widget.
class ElementWidget extends SingleChildRenderObjectWidget {
.....
#override
RenderHTMLElement createRenderObject(BuildContext context) {
return RenderHTMLElement(tagName,properties);
}
}
class RenderHTMLElement extends RenderProxyBox {
......
#override
void paint(PaintingContext context, Offset offset) {
if (child != null) {
context.paintChild(child, offset);
}
StringBuffer buffer = StringBuffer();
if (_properties != null) {
for (String key in _properties.keys) {
buffer.write(" '$key'='${_properties[key]}'");
}
}
ParagraphBuilder builder = ParagraphBuilder(null);
builder.addText("<$_tagName ${buffer.toString()}></${_tagName}>");
context.canvas.drawParagraph(builder.build(), offset);
}
}
In web source, video element is not there.
Any idea on how to archive it?