How to Make Web View widget in Flutter

[Music] hi everyone welcome back to AK flutter in today's tutorial explore how to integrate web views into your flutter applications before we dive into the coding part let's quickly understand what a web view is and why it's important in flutter development a web view is a widget that allows you to display web content within your flutter application it's useful for scenarios like embedding web pages displaying HTML content or integrating web-based features into your app basic knowledge of flutter in dark programming is recommended for following along with this tutorial First Step go to browser and search for pub. click on the first result Now search for web View flutter package you will find all the links in the description click on this you can add the package manually or via command open pubp yaml file and add the web view flutter dependency then run the flutter Pub get command to install the dependencies now ensure that you set the correct Min SDK version in your androidapp build.gradle file if it was previously lower than 19 now go back to the browser to see what's new scrolling down here we see many things we can use for example JavaScript mode determines the JavaScript execution mode in the web view the web view class has been deprecated and its functionality has been split into web view controller and web view widget we'll need to use these new components to achieve web view functionality in our flutter app Second Step go to vs code and create a simple interface that contains only a button that does nothing currently go and create web view. Dart here we've created a stateful widget named web view import material. Dart delete the container and replace it with safe [Music] area We Begin by creating a web view controller instance which is responsible for controlling the web view widget Within our app we notice that the web view flutter package has been called Next we use the set JavaScript mode method to configure the JavaScript mode of the web view setting the JavaScript mode to JavaScript mode. disabled let's start with the first image you set the JavaScript mode to disable meaning JavaScript execution within the web view is turned off moving on to the second image this time however ever we set the JavaScript mode to unrestricted meaning JavaScript execution within the web view is allowed without any limitations now go back to versus code after configuring the JavaScript mode we use the load request method to load a web page into the web view here URL parameter is required url. parse the method is used to parse the URL string and create a URI object we're loading the URL youtube.com come into the web view make sure to use either HTTP or https and the URL provided to the load request method to ensure proper loading of web content go back to VSS code and copy the name of class now go to main. Dart and scroll down when on press we Ed the push method of the Navigator class to push a new route onto the navigation stack in this case we're navigating to a screen containing a web view widget using the web view add const [Music] here I forgot something important let's go to web view. [Music] Dart replacing the container with a web view widget we will see that the controller is required and we have already created [Music] it now run the app I meant to do this to resolve this error replace disable with unrestricted we've disabled JavaScript execution within the web View and Ed a web page from the specified URL we see that the YouTube page has been loaded successfully to see if it works well let's search my YouTube channel it works great but the channel only has 100 [Music] subscribers I hope you found this explanation helpful and subscribe to my channel for more flutter tutorials thanks for watching and I'll see you in the next video

Channel: AK Flutter

Views: 2,420

Keywords:

Id: B1VKTniLEGk

Length: 6min 18sec (378 seconds)

Published: Wed Feb 14 2024