How to convert website to Android and iOS App using Flutter

hello welcome to my YouTube channel my name is so in today's video I'm going to show you how to convert your website to Android app on IOS app using fluter so for this video we are going to use Android Studio so quickly I I'm I have already opened my Android Studio so um you should do the same if you want to follow along um this alongside the video so open your Android Studio for um this project so I'm going to click on new flutter project okay so for this dialog box um what I'm going to do right now is that I'm going to click on next all right so for our project name I'm going to enter any name right there since it's just a demo video so what I'm going to do is start uh I'm going to uncheck all of this we don't need it for now so we only need IOS and Android so every other thing for the purpose of this demo will be the same so for you you can change your package name and also the description for your app okay so what I'm going to do right now is that I'm going to click on create button all right so guys if you haven't subscribed to my YouTube Channel please click on the Subscribe button and if you like the video click on the like button and you can also turn on the notification bell all right so what we are going to be using to be doing right now is that we are going to use the webview to convert our website um into IOS and Android up now if you take a look at my pro at my product directory we're going to see we have the Android folder and we also have the iOS folder okay so what we're going to do now is that I'm going to go to my web my web browser then I'm going to type pop.dev so it's going to open the pop.dev website what I'm going to do now is to search for webview I'm going to search a webview all right so I'm going to scroll down a little bit where we have webview underscore fluta I'm going to click on it correct so I'm going to click on the installing tab and then I'm going to copy the dependencies then I'm gonna paste it right on the dependencies so I've copied it I'm going to go I'm going to click on my Android Studio tab and then I'm going to open popspec.el all right so I'm going to scroll to where I have my dependencies I'm gonna paste the dependencies that I've copied all right so for the purpose of this demo we are not going to use the 4.0.2 I'm going to use 2.0.9 okay so you can click here pop K or you can go to your terminal click on your terminal okay so online your terminal you can type fluta about get and you press enter your keyboard okay so I'm going to minimize this is a terminal so what I'm going to do right now is that I'm going to go to my main.dot all right so I'm going to um I'm going to import the dependencies and then that will be my web view underscore filter correct so we don't need all of this code right here so I'm going to clean the code up so what I'm going to do is that I'm going to highlight all the codes down here then I'm going to delete it and then I'm going to I don't need this my app so we are going to use our own widget and that will be a material widget all right so before this um before we go on we are going to set if I take you back to the bob.dev website and we click on the readme tab um we are required to use a minimum SDK of 19. so I'm going to scroll down a little bit see it right here we have a minimum SDK as 19 so we again you know go back to our Android studio and then we are going to go to Android now click on the Android tab and click on app then I'm going to open the build.grado I'm going to double click on it to open then here we are going to scroll down a little bit on the default config we are going to change change our minimum SDK version to 19. so we are going to save it then we are going to close this we're going to close the pop spec.tr then now on our main dot dot under our material um up so what we're going to do right now is that we are going to um use the home property now on the home property we are going to use um a scaffold widgets okay so now inside our scaffold widget what you're going to you do right now is that we are also going to use the we are going to use the body property and on the on the body property we are going to um use uh safe area widget now on the safe area widget what we're going to do is that we are going to use the chair property on the child property we are going to use the webview widget now inside the webview widget we are going to initialize a URL that's the URL that's of the website that we that we want to convert to Android app and IOS app so we are going to say initial URL and then um I'm going to go back to my web browser now we have a sample website here that we want to use to convert into um IOS app on Android app so I'm going to copy it and then go back to my Android Studio I'm going to paste it right here okay so now for the website to work optimally on an Android app on IOS app we are going to um set a JavaScript mode to unrestricted so for me to do that I'm going to use the JavaScript property I'm going to type JavaScript mode and then JavaScript modes um dot on restricted okay so I'm going to save out of my work and then um there's this there's this debug Banner that used to display somewhere on on the app when you run it so um I don't need that I'm going to um get rid of that so what I'm going to do right now is that I'm going to say debug should check mood Banner I'm going to set it to false okay so once we do that then we are ready to test our app so I'm going to start my emulator so for me to do that I'm going to click on Device Manager so on the device manager I can choose to use um any of this will do so okay I think we have gone running already um let's see let's just open it we're going to go to next close the device manager tab that's clear click on emulator all right so we have it running already so what we're going to do right now is that we are going to go here and run the main dot dot file so let's see how our app will look like on a um mobile app so for the purpose of this demo we are going to use the Android emulator to test the app so it's going to work well and we're going to work both on the Android and the iOS okay so currently I don't have what it takes to test it on the iOS um platform so I'm just going to do with what I have which is the Android emulator okay so um our app has been loaded successfully so what I'm going to do I'm going to minimize this so that you can see it very well okay so this is a app it has loaded correctly um you can see the logo the navigation menu also click here okay you see it right there and then you can you know click here set this see so everything is working very well so that is our app you can go back to the home page okay so I can scroll down like this let me open you know a few features on the app so that you can see that everything is working very well so what I'm going to do I'm going to click on this okay so this is how it works everything is working correctly if you like you can zoom it right here to see how the website looks like that's the zoom part you can go back to home click on the logo all right you can return it back so guys this is how to convert your website into IOS and Android app using fluta webview thank you so much for watching if you haven't subscribed to my YouTube Channel please click on the Subscribe button if you like the video click on the like button and also turn on the notification Bell thank you so much for watching see you in my next video bye

Channel: Cletus Igbe

Views: 24,853

Keywords: How to, Convert, WordPress, Website, Mobile App, Android, iOS, wordpress website to mobile app, wordpress website to android app, convert website to app, convert wordpress to mobile app free, flutter tutorial, flutter, webview, how to convert website to android app, how to convert website to app for free, how to convert website to ios app free, how to convert website to app, how to convert wordpress website into android app, how to convert wordpress website into android and ios app

Id: tW1lD5VpmjA

Length: 12min 12sec (732 seconds)

Published: Mon Feb 20 2023