How to Convert Websites to Android and iOS Apps with Flutter WebView 4

[Music] welcome back to nextg today I've got an interesting tutorial that will take your web content to the next level ever wondered how to convert your website into a native Android or iOS app well you're are in the right place in this step-by-step guide I will walk you through how to convert your website into functional mobile app using flter whether you are a web developer looking to expand your reach or just curious about app development then this tutorial is for you before we dive in be sure to hit the Subscribe button below for more update on app development so to convert your website into an app so you need to make sure you have floter installed on your operating system if this is your first time working with flutter so you can and go to the flutter website which is docs. flutter. deev slet started install so on the documentation you will find uh the different operating system which you are installing flutter so have Windows Mac Linux and uh Chrome OS so if if you're using Windows like mine you click on Windows and then you follow the instructions then after installing floter so we need to set up our app for development so if you're using visual studio like mine and you can find the instruction on docs. flutter. devtools slvs code so here you can see and the instructions here are also similar to other code editor or ID so let's get started if we scroll down here we will find the detailed instruction on how to create a new project so here you can see to create a new flutter project from the flter starter app template so you go to view and then you have this so let's go over to visual studio code so here I've opened up my visual studio code so I'm going to click and hold control shift and P so if you're using Mac this should be command instead of control and then I'm going to select floter new project so click on flter new project and then it's going to ask you do you want to install the application empty application skeleton application module package and plugin so I want to install a complete flutter app so I'll click on application and here I have a folder called flter project so I'm just going to select this folder you can see I have other different floter app I've created so I'm just going to select a folder to create the project so select and then I'm going to give a name to my project so let's just call this web app so let's call that web app then I'm going to hit enter and I'll wait for the installation to finish make sure you have good internet connection and then wait for the installation to finish and here we go so here we have a starter app so I'm just going to remove all of the code in the main do that so you can see main do that so I'm going to remove all of this good so here we have material do dat package imported and this this is essential for creating the flter user interface UI component so next we are going to import another package called Web View and this provide the web view functionality which we need for displaying a website within an app but before we import that we need to First install the package so if we open up our browser and then we navigate to pop. d/ SL packages SL webview flutter so once you are here you will see the web view flutter package So currently we have 4.4.1 version as at the time of making this video can see published 2 days ago so right here if we go to the installation we need an SDK of 19 and above and if we scroll down here we are actually to add the web view floter as a dependency in our prospecto file so where can we find the prospecto file so if we go back to our app on the root directory so we can see prospect. yui so if I click on it and scroll down so this is where we can add dependencies so let's go back to the documentation of web View and if we navigate to installing so here we have the instruction of how to use the package so we are asked to run this command simply by going to our terminal and then paste that Command right here so I'm not going to run that command so what I will do I will simply copy this so web View flter so I'm going to copy this and then I will go back to my prospect. file and then I'm going to paste that right here so once that is done I'm going to save the file and this is going to get the dependencies for us so next if we go back to the documentation and after that we have to import this so we have to copy this and this will be imported so the reason why we are having an error is because we have a pop get filed so there was a time out so if we go back to our prospect. yo file so let's just remove the web view floter so if we save that file and then let's go back to let's go back to our main do if you Hoover on this and then go to Quick Fix and here you can say add web view floter dependencies so you can just click on that and then this will run flutter pop add web View floter and this is the same thing we have on the documentation so let's wait for this to finish so now that we have imported said the web view plotter dependency the next thing we are going to create our main function and the main function is the entry point of the floter app so I'm going to say void main just like this and this is going to call the run app method const and let's call this my app so this is going to start the floter application with the root widget being an instance of my app so we're going to create so we're going to create a stateless widget to represent the root of our application so to create a stateless widget I'm just going to type STL which stands for stateless and then I'm I'm going to hit Tab and this is going to be my app so just like this so in the build method I'm going to return a material app wiget so return material material app widget so just like this and the material app widget will set up the basic app structure including the title and the team and also the home property so we are going to give it a title so let's say title so we want to make sure that this is material app the typle so it's going to return the title wiget let's call this flutter floter floter demo so they just call it floter demo comma and then the next thing is a team and this is a team data and in the team data we're going to say primary primary Swatch we say colors and we can say amber so you can choose blue or whatever color you want and then after the team data we going to pass in the home property this home property will set an instance of a web view demo which will be the initial screen of our app the initial screen of our app so I'll say const con and let's call this web web view demo so next we are going to create why we are seeing this error is because we have not created a class so we're going to create a stateful widget of the web view demo so so we are going to create a stateful widget so stf which stands for stateful wiget and then we're going to call it so web view demo so something like this so basically the web view demo is a stateful widget and it is used to create the web view within our app then we have our create State method which return an instance of the web view State notice we have an underscore which indicates that this is a private CL used only within this file and here we have the underscore web view demo state which is the state class for the web view demo widget so here is the main thing so here I'm going to say web view controller is equal to controller equal to web view controller then going to say override and then void in it init State then in the init State method we initialize a web view controller named controller so in the inate method we initialize a web view controller named controller and this controller will be used to manage the web view so we say super super do init State then controller can basically find this in a documentation so if we go to the documentation and then they read me and then if we scroll down so here you can see the controller which is equal to web view so so we have controller then dot dot then we call set JavaScript mode JavaScript mode do unrestricted stricted so just like this and then we set the background color so background color call constant const and then we say color and we're going to pass in 0 0 x 0 0 0 so next we're going to set so navigation delegate you will say navigation delegate and here here we can Define how the page handles loading events such as progress page starts and Page finish so so let's start with on progress so we're going to pass it to be empty for now and then we can set the on page started so on the on page started you can specify also empty and then on page finish also set this to be empty so make sure you close that with a semic colon and then then we configure the load request and then here we are going to passing UI dot pass turn like this then here we can pass in the URL we want so I have a website which I want to convert I think that is PPR chronicle.com and here we go so I'm just going to copy this crl C and then I'll go back to that and then paste it here so make sure that is surrounded by quotes so next we are going to to return a scaold so I'm going to return a scaold and I'll set the background background color and this is going to be colors and let's say colors do white okay and after that I'm going to set the abar and this will be abar and within the abar then going to set the title of our abar so this going to be a const and then the text wiget and I'm going to call this PP Chronicles PP Chronicles after the Abba I'm going to return the body and this this is going to be web View and this will be controller controller just like this so the web view widget is the main content of the app who St controller that we initialized earlier so the web view will display the website specified in the load request method so here is the load request method so we have some few errors we need to fix we you know this is a class so we have to put that parenthesis right there so let's check if we still have errors so in my app we also need to include the class because is a class so just like this and then on the JavaScript mode if we go to Quick Fix so this error we need to get rid of this semi column and then let's fix the other web view so here we are still having the method web view is not defined for the type underscore this so in order to fix that let's go to the documentation so here we go passing the controller to a web view widget web view widget So based on the recent version the web view has been replaced with web view widget so if I copy this and then let's go back to this and then paste that and here we go all errors has been fixed so now we can now test our app if everything is working so I have a physical device so I'm going to use a physical device to test this so yours might be different yours might be uh true web or through an emulator So currently you can see we have have no device connected so I'm going to connect a device right now so I'm going to minimize this so I can bring in my device to the screen and here we go so I have my device on the screen so I'm just going to position it properly okay the next thing you have to do is to set the correct minimum SDK version um you go to Android app and build gdle and you have to set your minimum SDK to 19 so let's go to Android so Android app and then build. grle you're going to screw down and then here you see default configuration the minimum SDK so have to remove this and then put that to be 19 save the file so let's go back to our main. and then I'm going to main. that file then right click and I'm going to run this without debugging I'm going to wait for my app to launch we don't have to create a variable for this so make sure that the JavaScript model restricted has to be in capu later so we can save that and here we got some few errors so here we have unrestricted so let's go back to the documentation so we want to make sure that is Spell correctly let's save it and here we go we have successfully converted our website into an Android app thank you for watching and I would love to see you in the next video

Channel: NextTechGem

Views: 5,649

Keywords: webview flutter, website to android app, convert website to app, webview

Id: qsIh4eJ--Ug

Length: 20min 20sec (1220 seconds)

Published: Sun Nov 26 2023