Flutter Tutorial - WebView App | The Right Way | 1/3 Load URL, HTML, Javascript - Android, iOS

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/web_views_example WebView 2/3 Local HTML, CSS, Javascript Tutorial: kzbin.info/www/bejne/iaqnoGN9pqeJj7c WebView 3/3 Back Button, Loading Indicator, Cache, Refresh Tutorial: kzbin.info/www/bejne/a4OWlpuOi5Kipck Running Web App On Chrome Tutorial: kzbin.info/www/bejne/p5Pan6yiidOMnLs Settings Page UI Tutorial: kzbin.info/www/bejne/poq0cpuojsSGh6M Cached Network Image Tutorial: kzbin.info/www/bejne/bKjZdWCQYp6NiK8 Image Picker From Camera & Gallery Tutorial: kzbin.info/www/bejne/g4TZZGughJl4gM0 Amazing Lottie Animations Tutorial: kzbin.info/www/bejne/oaqzmq2em9NroZo Amazing Hero Animations Tutorial: kzbin.info/www/bejne/faTQgWCEr72Ll5I Page Transition Animation Tutorial: kzbin.info/www/bejne/lYOWdpKXpMtpb8U Flutter Upgrade Tutorial: kzbin.info/www/bejne/ZoKmaIZno7qgprs Running App On Real Device Tutorial: kzbin.info/www/bejne/l6DLnHx_ZqhngLs Google Sheets API Tutorial: kzbin.info/www/bejne/aYatZ4WkjLl6f7s QR Code Scanner Tutorial: kzbin.info/www/bejne/nnnImXx9m72Sr7c Google SignIn With Firebase Tutorial: kzbin.info/www/bejne/Z5yQmHyKj6Zseas Staggered GridView Tutorial: kzbin.info/www/bejne/jn_afZJvqtdriJo Calendar Events App Tutorial: kzbin.info/www/bejne/gqCnpauIoKx3itk

[@davidkanai6944]

i wish i could like this more than once, it's always a delight to watch your tutorials! Thank you

[@dicksonguinajnr1449]

Thank you so much my brother.. You've been blessing us with so much. Prayers and May God Be With you.. 🙏

[@emreokcularl5168]

Is it possible scrape web site that includes javascript even app works as a background service?

[@HeyFlutter]

Thank You @emreokcularl5168! Follow this link: stackoverflow.com/questions/74711868/flutter-how-to-scrap-the-data-from-javascript-in-web I hope you will get your answer 🙂

[@thakarmasoom3562]

hi man, 'thank you' your code is exactly what I want. but can we auto login without the fab button?

[@nkosingaleka6986]

Thanks Johannes. nice tutorial

[@HeyFlutter]

You are welcome, Nkosi Ngaleka!

[@davidarevalost]

Amazing! Thanks you, you saved me tonnes of research..

[@HeyFlutter]

Glad it was helpful, @estudiore 😀

[@Sampelmind81]

Thanks a lot, clean explanation, very good!

[@HeyFlutter]

You’re most welcome, Sampelmind81! 🙂

[@andresalba34]

Will this work on flutter web mobile/desktop?

[@LucaMartin-f8c]

This guide is not working anymore with new libraries, can you do an updated video about it? Thank you very much!

[@HeyFlutter]

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

[@pravinprince3221]

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

[@zekotch]

Thanks 🙏🏼 you’re a blessing. Please how to display a loading bar or a loading gif on screen until the page is completely loaded

[@zekotch]

Okay 👍🏽

[@AyushSingh-ux5oi]

This is something I too wanna know

[@andresalba34]

Just add a loading boolean variable. and add a circular progress indicator while the boolean is not false. Something like this should work

[@cbeeapps2106]

Tanks, your video helped me!

[@kameshvinayaka]

awesome bro, good to see this tut , thank you, and also tell me how to handle back navigations on back button, thanks

[@johnsunnyjohnsunny4296]

thanks a lot, sir your tutorials are great...I learned plenty of things.keep going sir

[@nassera.h5339]

thank u so much, like always your tutorials are great.

[@HeyFlutter]

You’re most welcome, Nasser A.H! 🙂

[@prayandcode]

Great video bro.. This is very important.

[@zagustan]

Hi Johannes, do you use particular architecture for a larger project?

[@HeyFlutter]

Thanks, Khafabi Dza Gustan! 🙂 You can go with any state management. Learn more about state management here: kzbin.info/www/bejne/bZmVc6WqgJ11psk

[@seetheworld3839]

Hey buddy thanks for the video but can u guide me as i want to access a js variable from the website's js file and that website's url i am loading in webview but i don't know how can i access it so if u can help me?

[@AnirbanChakraborty94]

Thanks a lot...this is what I needed for my work project.... I am working with flutter webviews for processing internet banking payments 🙏

[@ranjithkumardasari8041]

is this working in device ?

[@AnirbanChakraborty94]

@@ranjithkumardasari8041 The latest version of Flutter has made a lot of changes in terms of webviews.... now some of the features earlier provided by this library is now natively supported by the inbuilt webview widget of flutter

[@akashperera8104]

Nice tutorial.. 😍 can u show how to download anything from a website through web view

[@BskyRui]

Thx! Before a webiew page loaded, there is a white screen, how to fix it ?

[@BskyRui]

@@HeyFlutter Thank you for replying. I also found that I couldn't upload file in webview on Android. I haven't found a good way to solve it.

[@HeyFlutter]

Hello, Rui Li! Follow this link: stackoverflow.com/questions/54126511/how-to-fix-white-screen-in-webview-flutter, I hope it will solve your problem. Thank You 🙂

[@ritiksaxenaofficial]

Awesome ❤️. Quick question: Which state management you prefer? I'm planning to learn Provider. What's your recommendation?

[@ritiksaxenaofficial]

@@HeyFlutter Thank you

[@HeyFlutter]

Thanks, Ritik Saxena! 🙂There is no right or wrong. Simply take the one that you like the most. I prefer redux or provider as state management.

[@megaman236]

tnx man you're da best

[@hamiltondarryl3129]

Really awesome, thx.

[@codemoor]

Thanks for tutorial Can I change Type of the keyboard in to phone number like textformfield widget

[@HeyFlutter]

Thank You Coleman Danane! Follow this link: stackoverflow.com/questions/49577781/how-to-create-number-input-field-in-flutter I hope you will get your answer 🙂

[@VinothKumarBalasubramanian]

Thanks Johannes, How to render webview inside Column widget , I'm getting renderoverflow error, I'm trying to implement google recpatcha in flutter app. I want to load html page from my assets at the end of form inside column widget ?

[@mohsin..]

HI! How to remove header, with the floating action button? Is it possible to do that way?

[@HeyFlutter]

Thank You Mohsin Memon! Follow this link: stackoverflow.com/questions/52317243/flutter-webviewplugin-remove-header-and-footer-of-website I hope you will get your answer 🙂

[@mohsin..]

@@HeyFlutter Hey thanks for getting back to me, I meant to say without floating action button, and I yes I checked it out already, but the _webviewcontroller doesn't work, I should probably try it again! Thanks for the help!

[@mintesnottariku5309]

Nice tutorial or i can say nice guide! and i have been wondering if your flutter webview application is able to upload files from the site? because am facing webview file not uploading ... if you make a vid or shorts about how to fix it i'd appreciate it bro!

[@mintesnottariku5309]

@@HeyFlutter Tnx dude

[@seus6001]

Can you make webview with Telegram login widget in mobile flutter? Because it always keep bot domain invalid. (It was load not 2 tabs in the same time)

[@Elizabeth0613]

Hi, I have a question, I hope you can help me... is there a way to see the HTML code of a page that is in the WebView? I need something that can show me the code of a web page that is in my flutter project. Greetings :)

[@HeyFlutter]

Thank You Elizabeth Contreras! Follow this link: stackoverflow.com/questions/53831312/how-to-render-a-local-html-file-with-flutter-dart-webview I hope you will get your answer 🙂

[@yapyh2872]

If the transaction happens in the webview HTML, will it be able to evade that commission from appstore?

[@HeyFlutter]

Thank you, @yapyh2872! 🙂. Try to provide enough details with your question whenever you face any issue.

[@ricard458]

Is this secure? For example, if a external webpage has some type of bad JS script, can it affect the app or the device?

[@msosiexpress9564]

Hi Johannes, nice video! I was wondering, I need to disable javascript pop ups on my webview, how can I do that?

[@msosiexpress9564]

When set to disabled the App doesn’t start at all

[@msosiexpress9564]

Is it possible to disable a certain javascript pop up on a certain page?? Especially on iOS

[@AhmadAl_mohmmad]

Hello can you help me please.... I want to show an image or any content other than a message "There is no internet "when there isn't internet , I don't want the user to see the website link

[@HeyFlutter]

Hey 😊, احمد المحمد! Check out this video: kzbin.info/www/bejne/qqW2poWsqJhpeMU

[@robertlust6542]

Hi Johannes, thanks for this great Video. Is it possible with the webview plug in to show iFrames with Html5 content (interactive Videos). Cheers Rob

[@HeyFlutter]

Thank You robert lust! Follow this link: github.com/flutter/flutter/issues/27101 I hope you will get your answer 🙂

[@mandugulasunny9685]

flutter webview full-screen option not showing on video

[@andresalba34]

Hi Johannes! Is it possible to split a page from a url into two sections and place into two different pages inside flutter app? I am trying to put a calculator that calculates product dimensions. I would like to add a section for clicking on calculate and a different page for the results.

[@TechnophileLad]

does it work for web app?

[@rektgaming69]

Everything is working fine , with help of your videos i added splash screen , backbuttons ,i converted a random website , In that website facebook twitter webpage is working fine but showing error on whatsapp webpage (webpage is not available ) How to solve this problem :)

[@HeyFlutter]

Hello, REKT Gaming! Follow this link: stackoverflow.com/questions/73185422/web-page-not-available-error-on-release-mode-in-flutter I hope it will solve your problem. Thank You 🙂

[@rektgaming69]

@@HeyFlutter I tried this but still showing webpage error . 🙂

[@rektgaming69]

Anyother solution ?

[@Blossomflower123]

Please how can I check connectivity in webview pages ??

[@thaihung111]

thank you very much !!!

[@irontildeath]

Is it possible to save cookies and use in a different webview? For example, I open a webview to allow a use to log in, close the webview and then open a new webview that has the same cookies as the first which would remember that the user is logged in. Is this possible?

[@HeyFlutter]

Thank You IRON TIL DEATH! Follow this link: pub.dev/packages/webview_cookie_manager I hope you will get your answer 🙂

[@minanabil419]

is there any other way to autofill fields with my saved autofille data from my browser in android and ios with this plugin?

[@HeyFlutter]

Thank You Mina Nabil! Follow this link: medium.com/swlh/how-to-implement-autofill-in-your-flutter-app-b43bddab1a97 I hope you will get your answer 🙂

[@minanabil419]

@@HeyFlutter sorry but this not what i want i need autofill in webview i need web view to be have like i am in a google chrome browser autofill what saved in autofill

[@vicsystems]

Wao thanks so much for this.

[@itsabhineet]

Nice video. I am trying to create a webview app for our website, but the flutter webview plugin does not support html file input. Is there a way to support file upload?

[@itsabhineet]

@@HeyFlutter Thank you so much Johannes. I just saw your reply today. Your videos are very helpful. Meanwhile, I created a TWA app for my website and it is working great so far. App size reduced to mere 300KB and all webview issues got resolved.

[@HeyFlutter]

Thank You Abhineet Mittal! Follow this link: stackoverflow.com/questions/53831312/how-to-render-a-local-html-file-with-flutter-dart-webview I hope you will get your answer 🙂

[@tzi_tondza]

Hi Johannes, been trying to request on your github example. Im unable to get a positive outcome. Help out?

[@HeyFlutter]

Hey, @tzi_tondza 🙂 thanks for sharing, your issue will be resolved soon

[@synnotus]

Just in time tutorial. I have an issue with the keyboard not dismissing. is there any solution to this?

[@HeyFlutter]

Hello, SYNNOTUS! Follow this link: stackoverflow.com/questions/44991968/how-can-i-dismiss-the-on-screen-keyboard, I hope it will solve your problem. Thank You 🙂

[@masum_pori]

Awesome. thanks

[@demodemo6115]

If you want to share project, please do this with no conditions. Thanks 🙏🙏

[@HeyFlutter]

Thank You Demo Demo!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

[@sushantpatil9059]

HI Sir, How can we load post form html data in flutter web??? Note : for mobile it works using webview. For flutter web got stuck. Need help

[@HeyFlutter]

Thank You @sushantpatil9059! Follow this link: stackoverflow.com/questions/60731869/load-html-file-and-display-in-flutter-web I hope you will get your answer 🙂

[@sushantpatil9059]

@@HeyFlutter thanks for quick response. I am able to show html page. But when ever I put post action form then blank page shows. Not even shows any error in console of chrome.

[@sushantpatil9059]

Hi Johannes, Please make of Video of Flutter Web of Using WebView to post html form data ??

[@bildadobulu3100]

Good day sir, how will I give my web view access to my camera

[@HeyFlutter]

Thank You bildad obulu! Follow this link: stackoverflow.com/questions/56478375/access-the-camera-on-flutter-webview I hope you will get your answer 🙂

[@MrCamdere]

bro i subscribe your newsletter but can not download this source code ?

[@stefanbachrodt7072]

Huge thumbs up to you for this fantastic tutorial but a bigger thumbs down to Flutter for only supporting win10 or later!!! Android Studio it is... iOS users gonna have to take a hike

[@HeyFlutter]

Thanks, Stefan Bachrodt! 🙂

[@stefanbachrodt7072]

@@HeyFlutter YVW! I'm battling tho.. If you have the time plz consider doing a tut on AS too, there's code available but they don't mention how to exclude the header and footer or how to "crop" the whole page. My idea involves using a free wix site but since the "wix banner" is an element on its own I think, "cropping" may be needed, please run some experiments for us?

[@parameshmamidisetti8167]

How did you get so much knowledge, sir You are flutter hacker

[@broteendas1194]

Hi there, how can I use this to embed static Map

[@HeyFlutter]

Thank you 😊, Broteen Das! Check out this solution : stackoverflow.com/a/56536602 This may help you

[@iqbalvoices]

not working WebView, will you plz make video with latest update?

[@HeyFlutter]

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

[@rafhaellowixhomwad]

How to enable full video landscape in webview?

[@rafhaellowixhomwad]

Good day sir @@HeyFlutter , thank you for replying me. I really appreciate your works.

[@HeyFlutter]

Thank You Rafhael Lowix Homwad! Follow this link: stackoverflow.com/questions/64290230/flutter-webview-video-player-not-auto-rotating-as-observe-in-android-chrome I hope you will get your answer 🙂

[@talehqaffarov7763]

Hi, Is it possible webview file input add file using flutter?

[@talehqaffarov7763]

@@HeyFlutter Thank you for answers I have a html page and form (input type file element not working in webview - mobile gallery or documents) I was try webview_flutter: ^3.0.1 not working file input :/ Vielen dank

[@runningsky]

does this work if the website we are loading is written in php or any language other than javascript?

[@HeyFlutter]

Thank You 변다윗! Follow this link: medium.com/flutter/the-power-of-webviews-in-flutter-a56234b57df2 I hope you will get your answer 🙂

[@umutbulut4966]

is it possible to get notification with webview

[@HeyFlutter]

Thank You UMUT BULUT! Follow this link: github.com/bobanminic96/push_notifications I hope you will get your answer 🙂

[@vittorionicoletti]

on facebook if the passwords are wrong the script goes in loop

[@Toni_Pratama]

hello, when i tap and nothing happend, the pop up calendar is not showing. please help me

[@Toni_Pratama]

@@HeyFlutter thanks for your patience. there is no error on console

[@lanceolana8277]

I cant use the evaluate.Javascript function. Why? please help :(

[@HeyFlutter]

Thank You Lance Olana! Follow this link: stackoverflow.com/questions/50350001/run-some-javascript-in-flutter-webview I hope you will get your answer 🙂

[@rasathuraikaran5278]

If i login after I close the app it comes from initial method how to setup if login the page to conitinue the app from that place

[@HeyFlutter]

Thank You Rasathurai Karan! Follow this link: stackoverflow.com/questions/65950090/flutter-when-i-hot-reload-or-close-the-app-it-does-not-keep-the-user-logged-in I hope you will get your answer 🙂

[@kameshvinayaka]

how to handle form file inputs to pick from camera or gallery or file manager in webview

[@kameshvinayaka]

Then how to handle form input type file, can plz check once , its helps me a lot thanks

[@HeyFlutter]

Thanks, kamesh korada! 🙂WebView isn't well supported yet, however check out my tutorial about Image Picker from camera & gallery without webview: kzbin.info/www/bejne/g4TZZGughJl4gM0

[@flexiahosting7748]

Hello. My website have a form with file upload field. Its not working. Any Solution please

[@flexiahosting7748]

@@HeyFlutter Thank you so much

[@HeyFlutter]

Thank You Flexia Hosting! Follow this link: stackoverflow.com/questions/56252856/how-to-pick-files-and-images-for-upload-with-flutter-web I hope you will get your answer 🙂

[@faisalmushtaq2287]

is there any way to use readmode in webview??? Please help

[@HeyFlutter]

Thank You faisal mushtaq! Follow this link: stackoverflow.com/questions/62471299/reader-mode-for-webview-in-flutter, I hope you will get your answer 🙂

[@explainedinkannada5034]

can anyone help from where issubmitting came

[@adarshneeds]

Great !!!!

[@mahabubmom]

email verifacion not work for inbox please give me code driect

[@HeyFlutter]

Thank You Mahabub's Mom!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

[@bravolatavera3647]

how do I gets it's title of page to title of appear

[@HeyFlutter]

Thank You Bravo Latavera! Follow this link: github.com/fluttercommunity/flutter_webview_plugin/issues/192 I hope you will get your answer 🙂

[@tanthanh8386]

is there any way to show webview in flutter web, please? :(

[@HeyFlutter]

Thanks, Tan Thanh! 🙂 No, this is not yet supported by the Flutter WebView packages, however you could check out this solution: stackoverflow.com/questions/66328758/web-view-for-flutter-web-application

[@ahkstudio1566]

how do you save sessions of login

[@HeyFlutter]

Thank You Ahk studio! Follow this link: stackoverflow.com/questions/66194987/how-to-save-sessionid-of-first-login-and-doesnt-make-me-login-every-time-in-ina I hope you will get your answer 🙂

[@adarshneeds]

How to remove class from websites by evaluate javascript

[@HeyFlutter]

Thank you, ADARSH SINGH!😊, This is not possible with this package. Simply file an issue here: pub.dev/packages?q=dependency%3Awebview_flutter

[@dangtran8513]

webview in flutter can download file?

[@dangtran8513]

@@HeyFlutter i have configured javascriptMode: JavascriptMode.unrestricted, but can't download the file

[@TM-vg2mt]

Hopes permissions webview tutorial

[@shivamthapa9757]

how to open in safari browser

[@HeyFlutter]

Thank You shivam thapa! Follow this link: stackoverflow.com/questions/66792776/is-there-a-way-to-launch-safari-or-some-other-external-browser-on-urls-in-flutte I hope you will get your answer 🙂

[@shivamthapa9757]

@@HeyFlutter hi i have used flutterinappwebview package i want to detect change of url how can. ii do??

[@shalomtube2101]

How to make a reload on swipe up

[@shalomtube2101]

@@HeyFlutter Thanks you are the best😍 One thing that I have searched the internet but couldn't find any good tutorials is a flutter with PHP MySQL database and riverpod state management if could make one video or if you have any resources that could help me it will be my pleasure.

[@HeyFlutter]

Thanks, Shalom Tube! 🙂This is not yet supported by Flutter WebView, see here: github.com/fluttercommunity/flutter_webview_plugin/issues/606 You could use this workaround which only handles swipe up to reload however it is not showing a pull to refresh icon: stackoverflow.com/a/68934109

[@hbappi-official]

how to make it working in linux

[@HeyFlutter]

Thank You H. Bappi! Follow this link: medium.com/flutter/announcing-flutter-linux-alpha-with-canonical-19eb824590a9 I hope you will get your answer 🙂

[@feth-eddinehanani7477]

it soesn t work on ios for me

[@HeyFlutter]

Thank You feth-eddine hanani! Follow this link: stackoverflow.com/questions/63093104/why-webview-flutter-not-working-in-case-of-add-to-app-ios I hope you will get your answer 🙂

[@bjarg8771]

this example is obsolete....

[@HeyFlutter]

Thank you, @bjarg8771! 🙂

[@bjarg8771]

@@HeyFlutter huh?😳 you’re welcome

[@Theloebtit32000]

yes

[@robotcanfly4864]

it error ERR_CONNECTION_REFUSED

[@HeyFlutter]

Thank You Robot Canfly! Follow this link: stackoverflow.com/questions/55785581/socketexception-os-error-connection-refused-errno-111-in-flutter-using-djan I hope you will get your answer 🙂

[@Tay74514]

So where all going to act like Johannes is not a man of culture. 3:45

[@kamalCode]

Flutter Rest API DEVELOPMENT

[@derrickk45]

🙏 need one...too

[@demodemo6115]

Hi Johannes!, It's painful to get source code, I am very upset about this. I think this is not right way. Lots of developer/youtuber give that free without any condition, although I have subscribe your newsletter and not it's asking me to share with 7 friends it's very disappointing. By the way good keep it up. 🙏

[@HeyFlutter]

Thank You Demo Demo!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

[@talhashahab8328]

This person takes payment just to give the source code I'm going to report him you also report him

[@M37Shadow]

♥

[@shashankchappkhanawala8393]

Can we remove the header from KZbin website as well (youtube.com) using the code that you've provided in the video?

[@HeyFlutter]

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

[@yoon8127]

[@tintidalmedia]

Hello teacher. I have a probleme using this in production mode. How to solve this? net::ERR_CACHE_MISS

[@HeyFlutter]

Hello, Oumar Bailo Bah! Follow this link: stackoverflow.com/questions/60829199/flutter-webviews-gives-neterr-cache-miss-message, I hope it will solve your problem. Thank You 🙂