{"id":1712,"date":"2019-04-20T15:07:11","date_gmt":"2019-04-20T09:37:11","guid":{"rendered":"https:\/\/www.concettolabs.com\/blog\/?p=1712"},"modified":"2019-04-20T15:07:11","modified_gmt":"2019-04-20T09:37:11","slug":"webviews-in-flutter-what-an-amazing-breakthrough","status":"publish","type":"post","link":"https:\/\/websitelaravel.concettoprojects.com\/blog\/webviews-in-flutter-what-an-amazing-breakthrough\/","title":{"rendered":"WebViews in Flutter \u2013 What an Amazing Breakthrough!"},"content":{"rendered":"

Have you ever faced \u201cThe app needs to open safari? \/ The app needs to open Google Chrome?\u201d Or you have a payment gateway in your website & do not want it in your app?<\/p>\n

Well, Team Flutter has made a truly super cool module that enables you to join WebViews into your Flutter application to make the majority of this usefulness conceivable.<\/p>\n

<\/span>What is WebViews in Flutter?<\/span><\/h2>\n

Flutter is an open-source application development environment & a “webview” is a program packaged within a phone app creating what is known as a hybrid application.<\/p>\n

Utilizing a webview permits f<\/strong>lut<\/strong>ter app<\/strong><\/a><\/span>\u00a0to be developed utilizing Web advancements such as HTML, JavaScript, CSS, and so forth. Yet at the same time acts like a native application and can be placed in the app store. Henceforth permitting Flutter WebViews Developer to work with well-known technologies.<\/p>\n

<\/span>Let us understand Flutter WebView with an example.<\/span><\/h3>\n

We will create a simple flutter webview app where we will have a basic home screen with a button to open the URL. Follow the steps mentioned below:<\/strong><\/p>\n

    \n
  1. Collect all the required packages you require for implementing the webview.<\/li>\n
  2. Import all the necessary packages collected previously.<\/li>\n
  3. For loading the webview, implement the required route.<\/li>\n
  4. Once the route is implemented, add navigation.<\/li>\n
  5. Finally, clear & refresh the cache in a flutter.<\/li>\n<\/ol>\n

    Keep the following things in mind,<\/h4>\n
      \n
    1. Flutter does not come with a default widget. But, you can accomplish this with the assistance of the library.<\/li>\n
    2. For that, you have to import the package assigned for webview for utilizing it in the application.<\/li>\n
    3. You will get the package from pubspec.yaml file. Add flutter webview plugin and then click on the get package. The system will import all the required packages for you.<\/li>\n<\/ol>\n

      <\/span>Following is the code for the simple flutter webview app:<\/span><\/h3>\n

      Flutter WebView for iOS<\/p>\n

      \"Flutter<\/p>\n

       <\/p>\n

      In iOS, the webview widget is taken care of by the UIKit Control. In flutter webview iOS we need to make a special change in the XCode. In the file called Info.plist, there is an element called <dict>.<\/p>\n

      We need to add the following code in the <dict>:<\/strong><\/p>\n

      WebViewController _controller;
      \nWebView(
      \ninitialUrl: ‘https:\/\/flutter.io’,
      \nonWebViewCreated: (WebViewController webViewController) {
      \n_controller = webViewController;
      \n},
      \n);<\/p>\n

      <\/span>Concluding,<\/span><\/h2>\n

      WebView gives us a simple method to render site pages in our application. When you begin utilizing the Flutter module, it’ll become simple to attempt other cool flutter plugins available as well.<\/p>\n

      In another case, you can hire flutter app developer<\/strong><\/a> <\/span>who can help you build your flutter app with this WebView plugin for both Android & iOS. Also, let us know if you have any doubt regarding the same in the comments section, we will get back to you with the solution.<\/p>\n

      Till then, Happy Fluttering!<\/p>\n