Flutter Tutorial - PDF Viewer - Asset, File, Network & Firebase

Подписаться 200 тыс.

Просмотров 68 тыс.

50% 1

Use the Flutter PDF Viewer to download PDF documents and display them within your Flutter app.
Click here to Subscribe to Johannes Milke: ru-vid.com...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/pdf_...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HER
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Create PDF Document Tutorial: • Flutter Tutorial - Cre...
Setup Firebase Tutorial: • Flutter Tutorial - Set...
Pick & Crop Images Tutorial: • Flutter Tutorial - Ima...
Share Images & Files Tutorial: • Flutter Tutorial - Sha...
QR Code Scanner Tutorial: • Flutter Tutorial - QR ...
Bar Code Scanner Tutorial: • Flutter Tutorial - Bar...
Deploy Web App - Firebase Hosting Tutorial: • Flutter Tutorial - Fir...
Video Player Tutorial: • Flutter Tutorial - Vid...
Image Tutorial: • Flutter Tutorial - Flu...
Native Splash Screen Tutorial: • Flutter Tutorial - Nat...
Line Chart Tutorial: • Flutter Tutorial - Lin...
Pie Chart Tutorial: • Flutter Tutorial - Pie...
Showcase & Highlight Widgets Tutorial: • Flutter Tutorial - Sho...
TIMELINE
0:00 Introduction PDF Viewer
0:19 Download PDF - Network PDF
0:40 Save PDF
1:16 Display PDF
2:51 Setup PDF Viewer
3:38 Setup Android
4:30 Setup iOS
5:40 Pick PDF - File Picker PDF
7:38 Load PDF From Assets
9:06 Load PDF From Firebase
9:46 Setup Firebase
10:20 Upload PDF In Firebase Storage
11:53 Swipe PDF Viewer
12:21 Page Snap PDF Viewer
12:37 Page Fling PDF Viewer
12:51 Auto Spacing PDF Viewer
13:08 Display Page Number Of PDF
14:52 Set Page Number Of PDF
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

Наука

Опубликовано:

5 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 136

@TrikNgonlen 3 года назад

Hi, @Johannes Milke ... thanks for your consistency uploading new trick, knowledge, and all in your videos.

@zkiyyeller3525 3 года назад

Thank you Johannes I love how you break everything down.

@zkiyyeller3525 3 года назад

@@HeyFlutter are you available for flutter project?

@visakhraman4539 3 года назад

Thank you for this awesome video. Can you also suggest how to open PPT, doc, docx as a widget?

@AlleyKt 2 года назад

Hi there! Great work! Can you tell me how to Load PDF From Assets to a specific page? So that the first shown page would be a preset number...

@user-cx4eu8xc5v 3 года назад

Thank you so much for your lecture. !!! is there a way to use pdfviwer on flutter web?

@mox2857 2 года назад

Very helpful video, I have a question how i can to fit pdf view to all screen?

@mominmostafa4419 2 года назад

Thank you for such a nice tutorial Johannes. Take love from Bangladesh 💜

@simonlee6035 3 года назад

This is awesome thank you!

@ricardochaves1172 3 года назад

U R AMAZING! Please, keep making that kind of videos Tnx a lottttttt!

@reginaldodejesusoliveirasi4930 Год назад

Once again, thank you so much for all the lessons.

@HeyFlutter Год назад

You’re most welcome, REGINALDO 🙂

@aleemkhan3275 3 года назад

Brother can we perform OCR on pdf in flutter App and then perform Text to speech after recognizing text through OCR and also speed controlling of TTS

@ibrahimmaghfoul3860 2 года назад

Great video you saved my life thanks alot but i have a small problem... The package is working properly in the debug mode but it stopped in the release version.. I did all the steps but it didn't work and to be more specific the problem is that i can't open the pdf page when i Navigate to it... Please it has been 3 days now and i didn't find any solution

@mindfulmusings199 2 года назад

hey is it possible to show directly in pdfviewer without storing as a local file ? (from url )

@battleGroundAce832 2 года назад

Hi, this is awesome but can we show something like thumbnail fo pdf before then clicks to open the whole pdf? Like google drive pdf thumbnail

@FlutterMapp 3 года назад

One more referral to your channel! ahaha You have a gigantic library of tutorial on Flutter that is crazy Johannes!! 🙌👏✌

@AyushPanditofficial 2 года назад

Yo bro

@FlutterMapp 2 года назад

@@AyushPanditofficial yooo!!! Ayush the legend!!! 🎉👏👏⚡️

@AyushPanditofficial 2 года назад

@@FlutterMapp i need one help bro please make telegram channel its easy for me tell doubt discord is confusing for me

@juliansmart4589 2 года назад

Hi Johannes, awesome video. I am just getting this error, could you please help. Invalid argument(s): No host specified in URI Instance%20of%20'_JsonQueryDocumentSnapshot'

@andrewflearing 3 года назад

amazing video! Thx!

@jaimepremy 2 года назад

Any update on making this work with scoped storage?

@prajwalpatil2253 3 года назад

Brother thank you so much. You are awesome.

@stefaandeconinck1531 3 года назад

Thx great video, love it.

@Thafseerzzz 2 года назад

explained well and informative....

@jedzzi 3 года назад

Can u load data from firestore to pdf?

@Zobno 3 года назад

Hello, I would like to know if this applies to a web application, I'm trying to do it and nothing shows on the page :/

@abhishekagarwal6750 2 года назад

crisp and clear as always! thanks Johannes!! One Question : if i do not want to specify the url hard coded in app but fetch the name of pdf from storage and then display it, because the pdf files will be added to storage and specifying the name of each pdf file is not possible...

@abhishekagarwal6750 2 года назад

@@HeyFlutter bro your tutorials are awesome!! I figured it out myself using your download files from firebase storage video, i followed that video and in place of images, i just put pdf files and opened it with help of pdf viewer explained in your pdf viewer video, feeling like a pro programmer, thanks man, really appreciate your work!!

@voixjournal2167 2 года назад

Ur explanations are awesome and I really did get the output.... But then the pdf file with 10 pages or less is being able to be viewed.... I want a pdf of 40 pages to be viewed, from the firebase storage.... The error thrown for me is " An unknown error occurred, please check the HTTP result code and inner exception for server response. Code: -13000 HttpResult: 200 the maximum allowed buffer size was exceeded." Could u help me out?? It really would be great if you could...

@CarlosAVP 3 года назад

Very nice video! and how can I download the file?

@bhuvanmishra13 2 года назад

Thank you very much! :)

@sumittiware9382 3 года назад

thank you for this video

@EusebiVidal 2 года назад

Hello! I want to show a PDF. When I use the PDF of the example there is no problem. When I want to display a PDF of the S3 (Amazon) it says the name is too long. How could I solve it? The name is long because it adds GET parameters so that the PDF can be viewed because it is private, without these parameters it could not be seen (OS Error: File name too long, errno = 36)

@ChiamakaOgugua Год назад

Sir, thanks for the work you put. Deeply appreciated. My question is, is there a line of code that will show readers where they stopped, as they were reading, when they come back to the app?

@HeyFlutter Год назад

Thank You Chiamaka Ogugua! Follow this link: github.com/JideGuru/FlutterEbookApp I hope you will get your answer 🙂

@ChiamakaOgugua Год назад

@@HeyFlutter sir, I followed the link but confused. Don't know what to do. I didn't see any answer

@Moncellence 3 года назад

I have a question please How can you know the codes for a specific job, for example: When I want to add a feature, should I just search for it, or is it with experience, or does it have ways to search and access a code? Thank,

@Moncellence 3 года назад

@@HeyFlutter nice, thank u.

@viktorvostrikov9625 3 года назад

Thanks! How can I add an image (user's digital signature) on top of the PDF? Also can I zoom pdf? It seems it is not possible in Flutter...

@viktorvostrikov9625 3 года назад

@@HeyFlutter Wow thanks! I briefly looked at it and I can see that you managed to export image! How can I put it back on the PDF then and save it as a new PDF with a signature on top using this library? I think it is not possible and we should use Native android pdfBox

@ezone2726 3 года назад

Worked flutter on firebase pdf but when tap the elevated button and navigate the pdf page then open pdf file and pdf will be some portion of center will be dark ,top part of the android screen will be dark, center part will be shown in text and also buttom part will be dark...why this will be happen? In your case there will working perfectly as of mine i am so confuse what happen to my app? If possble do help! #thanku #keepsharing #flutter #behappy

@blogfish1237 3 года назад

Please help me to edit the pdf and save it by adding an image.

@sprksx3917 3 года назад

how can i show the pdf without the page break whitespace?

@sebangel9182 2 года назад

great video! if i have some files in diferent folders, what have that write in the line "final url = ;" 11:04

@HeyFlutter 2 года назад

Thank you, SEBA NGEL! 🙂. Proive the complete path inside the bracket.

@eNONO-ot4zh 3 года назад

thank u. Amazing

@topProgrammer 3 года назад

When I change orientation my androib phone, pdf view is disappearing, why?

@deepcodes 3 года назад

Hello, I am getting an error while calling _storeFile(), bytes: The argument type 'Uint8List?' can't be assigned to the parameter type 'List'. is there any way to fix this error? Thanks in advance, your video is really helpful sir.

@deepcodes 3 года назад

@@HeyFlutter Solved! 😊

@YXUN2000 2 года назад

Hey Johannes, there's this error for loadnetwork in pdf API dart, "The argument type 'String' can't be assigned to the parameter type 'Uri'. _TypeError (type 'String' is not a subtype of type 'Uri') ", do you know how to resolve the error? Thanks!

@ravizyv Месяц назад

Hey don't you know how to fix this problem? I hope you've figured it out in 2 years.

@kbyo2006 3 года назад

Great video!! But, is possible export to pdf file from some text or richText created in flutter 🤔🤔??

@kbyo2006 3 года назад

@@HeyFlutter I'll be waiting!! Please try to add an image pictures to the pdf file if is it possible... 🙏🙏😊😊😁 Thanks!!

@immanuels6866 3 года назад

superb, also need video on uploading pdf files.

@JOc17KER Год назад

do we still need to change some configuration tu use this package nowadays?

@HeyFlutter Год назад

Thank You zariliusra! Follow this link: pub.dev/packages/flutter_pdfview I hope you will get your answer 🙂

@GauravKumar-lx5vn 2 года назад

Amazing..... 👌🏻👌🏻👌🏻👌🏻

@seyarsana8903 3 года назад

thanks for the tutorial, one questions, how to change horizontal swipe direction from LTR to RTL?

@seyarsana8903 3 года назад

to open Persian and Arabic pdf books and these languages are RLT

@seyarsana8903 3 года назад

@@HeyFlutter Thanks a lot for your time

@ideafizz9632 2 года назад

How do i thank you!! 😍 very helpful 👏🙌

@marczakrzewski9023 9 месяцев назад

is there a way to use this with the inappwebview? like when a pdf link gets clicked that the link gets used instead of hardcoding it?

@HeyFlutter 9 месяцев назад

Thank you, @marczakrzewski9023! 🙂. Try to provide enough details with your question.

@mattjacobwilliams1721 2 года назад

does this work wth blob storage instead of firebase?

@mattjacobwilliams1721 2 года назад

@@HeyFlutterIf u store a PDF in blob storage, do you recieve an URL? Also can i just follow your steps of firebase, but then with blob storage?

@otabekabduraufov3171 3 года назад

Why most of the libraries you are using are old versions?

@sagar7929 3 года назад

Thank you for this tutorial! Please make a flutter firebase series with setup role authentication and user post and admin manage user account and so on.

@sagar7929 3 года назад

@@HeyFlutter thank you and hope that future video will be soon😊

@pravinprince3221 11 месяцев назад

Thank you for the wonderful video sir it is very helpful for me and my team, Thanks again sir

@HeyFlutter 11 месяцев назад

Glad to hear that, Thank you @pravinprince3221! 😊

@shubhgajjar8782 11 месяцев назад

Hello sir, could you make the video on pdf viewing app where we can extract the text please?

@HeyFlutter 11 месяцев назад

Thanks for the idea, @shubhgajjar8782! 🙂 I have added it to my list of ideas for future videos!

@hamzadaiz9002 2 года назад

Thank You so Much

@haiderjaafer8164 3 года назад

hi Johannes Milke how can add CircularProgressIndicator before pdf render from firebase

@YXUN2000 2 года назад

Hi, are you able to do it? I am struggling to put circularprogressindicator too

@MohamedIbrahim-uk7mj 3 года назад

Hello Johannes I'm big fan to you I wanna ask you something I search a lot about how to make index for Pdf file I wanna make button when pressed go to chapter two for example How I can Do it please Thank you.

@MohamedIbrahim-uk7mj 3 года назад

@@HeyFlutter thank you a lot ♥

@ariefsetiawan5955 Год назад

can flutter do view a file (pdf, docx) without saving that file in local storage phone ?

@HeyFlutter Год назад

Hey, Arief Setiawan 🙂 Not possible so

@MohanRaj-cp9lg 2 года назад

How to get local video file path

@nowhynot7711 3 года назад

Appreciated

@MrCode98 3 года назад

Hello, Thank you for the video Can you create for us a video to show us how we can download pdf file from a link and save it and next we call the pdf from storag and not link

@MrCode98 3 года назад

Thank you i will see it but if you provide for us a video will be more help full ❤️

@Islamicvideow2024 9 месяцев назад

can you please help me on how to add draggable scrollbar on it. please

@HeyFlutter 9 месяцев назад

Hey 😊, @TheBraveTate! Check out this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VVGzS-OPtdc.html I hope this may help you

@mashoodhussain7655 2 года назад

can we add animations on when we are changing the page?

@mashoodhussain7655 2 года назад

That's so sweet of you@@HeyFlutter after a year you are still here to help your subscriber. Thanks a lot

@sanjibdutta9270 3 года назад

Great.. waiting for markdown and LaTeX 😊

@auliasabril1899 3 года назад

I am waiting too for this mike

@althafaralijaffarali1803 3 года назад

Can we make this pdf app to open automatically whenever we touch a pdf file? If yes how to do it bro?

@althafaralijaffarali1803 3 года назад

@@HeyFlutter Thank you so much bro 👍

@alabeb8455 2 года назад

Thank you

@HeyFlutter Год назад

You are welcome, ala beb!

@philipabakah5718 2 года назад

I have the "Could not load asset " error thrown back to me ... please help

@YXUN2000 2 года назад

Hi, how do I add circularprogressindicator when the file is loading to be opened?

@YXUN2000 2 года назад

@@HeyFlutter Thank you! Let me check it out

@av623 2 года назад

Did u add the progress indicator ? If u did can u share me the code

@gambitsgobrrr5687 3 года назад

How can I convert Image to pdf? Im new to the channel have you made a video of it? If yes, pls share the link:://

@gambitsgobrrr5687 3 года назад

@@HeyFlutter thanks Johannes!!

@KarmaKanda 3 месяца назад

please make a video how to give gap in page? in flutter cached pdfview.

@HeyFlutter 3 месяца назад

Thanks for the idea, @KarmaKanda! 🙂 I have added it to my list of ideas for future videos!

@vaishnavisood9699 3 года назад

Unhandled Exception: FileSystemException: Cannot open file, path = '/data/user/0/com.example.authentication_direction/app_flutter/' (OS Error: Is a directory, errno = 21) I am getting this error, anyone has any idea what wet wrong??... any help will be appreciated🥺

@abdelazizkayoueche8317 2 года назад

And if we want to implment it for web it works?

@HeyFlutter 2 года назад

Thank you, Abdelaziz Kayoueche! 🙂. Yes it will.

@muhammedjasir1410 2 года назад

Could you do a video on PDF editing , electronic signing etc.

@muhammedjasir1410 2 года назад

@@HeyFlutter thanks bro❤️

@ajmiouerchfani6473 Год назад

Hello can you show as haw you can edit and sing pdf in flutter please

@HeyFlutter Год назад

Thanks for the idea @ajmiouerchfani6473 😀, i have added it in my list of future videos

@rankokoturic6633 Год назад

What is this and where do you define it. I'm getting error The name 'File' isn't a type so it can't be used as a type argument. Try correcting the name to an existing type, or defining a type named 'File

@HeyFlutter Год назад

Hello, Ranko Koturić! Follow this link: stackoverflow.com/questions/61483272/error-dart-the-name-x-isnt-a-type-so-it-cant-be-used-as-a-type-argument, I hope it will solve your problem. Thank You 🙂

@changeit1935 3 года назад

Is it possible to open google drive pdf files using this network method?

@changeit1935 3 года назад

@@HeyFlutter Thanks a lot. Amazing tutorials. 🤩🤩🤩 keep it up

@YXUN2000 2 года назад

@@changeit1935 Hi! are you able to open google drive pdf using network method? I am trying to implement but fail to do so, hope to get your reply. Thank you!

@menendezonprod 3 года назад

Hi Johanne, thank you for your sharing. I'm a beginner in flutter, I work on a Book-e project, I'd like to know if could hightlight a pdf Document using flutter?

@menendezonprod 3 года назад

@@HeyFlutter So, keep me in touch from newest features of PDFView widget.

@KarmaKanda 4 месяца назад

How to give Gap in page ? its showing all page is same there is not space between pages

@HeyFlutter 4 месяца назад

Thank You @KarmaKanda! Follow this link: stackoverflow.com/questions/57530527/how-to-give-some-space-margin-padding-between-pages-in-pageview I hope you will get your answer 🙂

@KarmaKanda 4 месяца назад

@@HeyFlutter please make a video for giving gap in pdf

@SeoValentina Год назад

Everything goes correct when in the emulator but when generating the apk and opening it on the mobile it does not work

@HeyFlutter Год назад

Thank You Seo Valentina! Follow this link: github.com/flutter/flutter/issues/75720 I hope you will get your answer 🙂

@akhilnaidu6121 3 года назад

I'm trying to open 30mb pdf file from firebase storage and it's showing storage exceeded

@akhilnaidu6121 3 года назад

Thank you @@HeyFlutter your videos helped me a lot to finish my project

@270596123 3 года назад

If someone can help me, I want to search for a word using PDFView, how do I search for a word within the PDF?

@270596123 3 года назад

@@HeyFlutter Thanks for answering

@270596123 3 года назад

@@HeyFlutter Do you have any ideas, which I can use to be able to map the PDF with all the words? I think and make a list and put it in alphabetical order.

@kazemob 3 года назад

How to render pdf first page?

@kazemob 3 года назад

@@HeyFlutter Thenks,i'm wait second part

@faheemahmadofficial7701 3 года назад

Thanks, Please make new videos every day and make them complete and make apps like todo, calculator, uni prokects mini...local host projects etc... it would mean a lot but keep them simpler yet beginner easily