WebView Apps with Flutter

What are WebViews?

A browser engine contained within an application. The WebView allows the programmer to write the bulk of the application using HTML, JavaScript and CSS, the standard Web programming tools.

What is Flutter?

Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.

Today we will explore how to create WebView based applications using Flutter. We will be using a special plugin called ***flutter_inappwebview***.

flutter_inappwebview plugin allows you to add an inline webview, to use an headless webview, and to open an in-app browser window.

Minimum Requirements:

• Dart sdk: “>=2.12.0–0 < 3.0.0”
• Flutter: “>=1.22.2”
• Android: minSdkVersion 17 and add support for androidx (see AndroidX Migration to migrate an existing app)
• iOS: --ios-language swift, Xcode version >= 12

If you’re looking to just clone a boilerplate code, change your URL and deploy the application, checkout this ***GitHub repo***. Follow along if you wanna do it step by step.

Steps to create your Webview app with Flutter:

Step 1: Create new Flutter project

flutter create new_project
cd new_project

Step 2: Add the following plugins to pubspec.yaml on line 30

 flutter_inappwebview: ^4.0.0
 permission_handler: 8.1.4+2

Step 3: Change minSdkVersion to 17 on Android/App/build.gradle

Step 4: Find AndroidManifest file inside Android/App/Src/Main/AndroidManifest.xml and include the following lines.

//Before <application... tag
<uses-permission android:name=”android.permission.INTERNET”/>

//Before </application> tag
<provider
android:name=”com.pichillilorenzo.flutter_inappwebview.InAppWebViewFileProvider” android:authorities=”${applicationId}.flutter_inappwebview.fileprovider”
 android:exported=”false”
 android:grantUriPermissions=”true”>
 <meta-data
 android:name=”android.support.FILE_PROVIDER_PATHS”
 android:resource=”@xml/provider_paths” />
 </provider>

The code above makes sure that necessary permissions are allowed in the application.

Step 5: Run your app to test and build!

flutter run
//or
flutter build apk

FIN.

Excited Saturday Morning GIF — Find & Share on GIPHY