How to integrate InAppWebview in flutter - flutter_inappwebview

foreign let's check out how to integrate in-app webview in full letter so let's get started so here is the demo ad been created so it has the button that will open the in-app webview in flutter app itself so when I press on this button you can see there is a progress indicator and the website get loaded into my flutter app itself okay so let's understand how to integrate this thing in our flutter application so let's get started okay so now we are in our Android Studio IDE and here is a flutter project been created by name flutter in-app webview example okay so now I have removed all the default code that is the counter code given by flutter and I have just added a button that will open a website so you can see over here at the center of a screen I have a button when I press on this button I want to open a website that will get loaded into a app itself okay so for this we are going to make use of a library called as flutter in-nap webview so you just need to add this Library under dependency section of your Pub specification dot yaml okay so after adding that just hit this subject button okay so this will install the library in your flutter app as an external Library okay so now after doing that you just need to import it wherever you are going to make use of okay so here what I will do is I will just create one more page one more dot file and name it as my website okay so here I have created a DOT file by name my website so first of all we need to import material dot dot and create a stateful widget okay so I will just name this class as my website okay so here it is a container so I'll just change it to scaffold widget for now okay so now in the scaffold widget under uh body property I want to show my in-app webview okay so from here let's navigate the user to this page when the button has been pressed okay so for that I will just make use of Navigator dot push context material page root okay context and from here I want to navigate the user to my web page so this is the page so by doing this the our file will get I have to automatically imported over here you can see okay so now when the button is being pressed the user will be navigated to page two that is my web page okay so here so now as we have added this Library we need to import it over here so import uh flutter in-app webview okay so by doing this you can make use of this widgets to inside our body uh property of a Stafford widget okay so before doing that there are some requirements like we need to uh declare some variables so let's do that so here first for Progress bar we need a progress variable so double progress and initial we will set it to zero and the second thing is we need uh in-app webview controller so let's initialize it over here okay so this will be initialized later in the app view itself okay so now here uh body okay so as we are going to show a webview and progress indicator in our app itself as I shown in in the demo over here so you can see that is a progress indicator being shown and after that the website gets loaded so for this the better option is to make use of Stack widget so let's make use of it over here okay stack with z and inside child run property we can add widgets so first thing is we need in-app webview so here there are various properties that you can make use of the first thing is to load a URL we must make use of initial URL so URI request URL URI dot parts and here you need to pass your url of the website that you want to load okay so the website will get loaded by this property okay so now to control our website we need some controllers to be attached okay so for that there are various properties been given such as on view created okay so here once the website has been loaded we need to uh add this controller that is the website controller to our local variable that is in-nap controller that we have created over here so we can do it in this property so here in-nap controller controller okay so here in-app webview controller is equal to this control like this okay so by doing this we can just control our website that has been loaded okay now over here so to show a progress bar we can make use of on progress change okay so here there are two parameters or functions that we need to pass one is controller and the second parameter is the progress bar okay so this function or a property will keep on repeating and uh we will get the progress of how much the website has been loaded in this property okay so now for example when our websites load so you can see I am just showing a progress indicator like this and once it is 100 to loaded then the progress indicator will become invisible okay so this has been controlled from this function okay so over here set State our progress is this one this variable and we need to add it with this progress divided by 100 okay so whatever is the progress been passed over here we are assigning the value to our progress bar progress variable over here so now our website loads in this webview okay so let's check if it is working or not okay so one thing I forgot is I need to add a URL so I will just add my website URL uh in this widget so over here refresh let's wait yeah okay so when I press on this button so you can see our website will get loaded into a second but you as you saw that is there was no progress there was no nothing so user of to indicate the user will need to show something to the user that is the website is getting loaded okay so now website this in-app webview is being successfully loading so I need to just show a progress bar now okay so here we can make use of our variable if the progress indicator value is less than 0 then what we can do is we can just show a container okay so inside this container I will just show a linear progress indicator widget and here I will just pass the value that has been updated in this variable okay and now once the progress has been successfully loaded or a website has been successfully loaded to 100 then we can just show a empty widget so in this case I will just show a size box without any data in it okay so now let's hot refresh and check okay so you can see there is a progress bar being shown over here but here what is happening is the app is getting loaded in status bar itself so it is acquiring the space of the status bar also okay so what I can do is I can just wrap this or this widget with a safe area like this so you can see now it is not acquiring the space of status bar okay and now when I navigate the page like this and when I press on the back button you can see our app is getting directly exited to The Back Page okay so this would not happen when the user navigate to some pages when he press back page back button the user should be able to go to the previous page like the before okay so for this what we can do is first of all we need to wrap this scaffold area safe area sorry safe area with a widget called as will pop scope okay so by making use of this we can control our back press of the user okay so now over here return false okay now here what we can do is uh let's initialize the variable called means last page so I'll just name it as is last page and to this variable I will just uh get the data from our webviewcontroller DOT can go back Okay so here uh if it can go back then this will be true and if it cannot go back means if it is the last page for example so this is the last page this from this page the user can go back so at this time the uh this variable will be true and if the user is in this page then he can directly exit the app to the previous page okay so here if is last page then uh controller dot go back okay and return false yeah so we need to add a weight key over here okay and here if it can go back then I can just show the true button okay so now let's check so progress bar is being shown I can navigate two different pages from my flutter app itself and when I press on back button you can see the previous page is getting loaded like this okay so that's all for this video tutorial thanks for watching please do subscribe protocol this point the complete source code of this tutorial will be on my website protocols point.com so you can just get the source code from there so thanks again for watching the video tutorial

Channel: Proto Coders Point

Views: 19,430

Keywords: flutter, flutter tutorial, android, android tutorial, flutter in app webview, In-app webview, Flutter_inappwebview, Web content integration, Mobile app development, Flutter packages, Cross-platform development, flutter_inappwebview, flutter_inappwebview example, flutter flutter_inappwebview, flutter_inappwebview ios not working, flutter webview, flutter webview example, flutter webview plugin, flutter webviewcontroller, webview in flutter example

Id: _ifwJhUPLzA

Length: 10min 34sec (634 seconds)

Published: Sat May 06 2023