Flutter Advanced Webview Tutorial #1 — InAppWebview(Android & iOS).

Hello everyone and welcome to a brand new tutorial series on Flutter. Today we’re going to explore 3 advances webview in an application using Flutter.

In my previous article, I talked about How to convert your website into an application in a few minutes which is the very basis of creating a webview in flutter application, there I explained the usefulness of webview and many other kinds of stuff. In addition to the explanation, there is another aspect where the webview is very helpful, assuming your project as both website and mobile app, in the application you want to create/clown the about us on your website to the app in such cases you can use the help of webview by just displaying that every page of your website as webview on the app.

We’re going to have three different sessions for each webview, so everything won’t jam-packed. Each webview will look like the image below.

Outline

  1. InAppWebview
  2. InAppBrowser
  3. ChromeSafariBrowser

We are going to make use of a package called flutter_inappwebview, this package has everything we’re going to use, I recommend this package for your advanced webview because it has a lot of features that are important so do check it out flutter_inappwebview.

PART ONE — InAppWebView.

I believe you already create your project, in your pubspec.yaml file add

dependencies:
flutter_inappwebview: ^4.0.0+4

IMPORTANT Note for Android and iOS

If you’re running an application and need to access the binary messenger before runApp() has been called (for example, during plugin initialization), then you need to explicitly call the WidgetsFlutterBinding.ensureInitialized() first.

An example:

void main() {
// it should be the first line in main method
WidgetsFlutterBinding.ensureInitialized();

// rest of your app code
runApp(MyApp());
}

So your runApp() should basically look like this

Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}

If you run your app now with the package input you will get an error

the library might be using APIs not available in 16  Suggestion: use a compatible library with a minSdk of at most 16,   or increase this project's minSdk version to at least 17,   or use tools:overrideLibrary="com.pichillilorenzo.flutter_inappwebview" to force usage (may lead to runtime failures)

This simply means that your minimum sdk is too low for the package, so to clear that navigate to <your-project>\android\app\build.gradle and update your minSdkVersion from 16 to maybe 18 or so, just leave it at 18. Then rerun the app everything should work fine now.

InAppWebView class

Flutter Widget for adding an inline native WebView integrated into the flutter widget tree.

The plugin relies on Flutter’s mechanism (in developers preview) for embedding Android and iOS native views: AndroidView and UiKitView. Known issues are tagged with the platform-views label in the Flutter official repo. Keyboard support within webviews is also experimental.

To use InAppWebView class on iOS you need to opt-in for the preview of the embedded view by adding a boolean property to the app's Info.plist file, with the key io.flutter.embedded_views_preview and the value YES.

Also, note that Android requires Android API 20+ (see AndroidView).

Use InAppWebViewController to control the WebView instance. Example:

main.dart

import 'dart:ui';
import 'package:flutter/material.dart';
import 'inappwebview.dart';

Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Advanced Flutter Webview',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
debugShowCheckedModeBanner: false,
home: InAppWebview(),
);
}
}

Create another file and name it inappwebview.dart

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class InAppWebview extends StatefulWidget {
@override
_InAppWebviewState createState() => new _InAppWebviewState();
}

class _InAppWebviewState extends State<InAppWebview> {
InAppWebViewController webView;
String url = "";
double progress = 0;

@override
void initState() {
super.initState();
}

@override
void dispose() {
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('InAppWebView Example'),
centerTitle: true,
elevation: 0,
),
body: Container(
child: Column(children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
child: Text(
"CURRENT URL\n${(url.length > 50) ? url.substring(0, 50) + "..." : url}"),
),
Container(
padding: EdgeInsets.all(10.0),
child: progress < 1.0
? LinearProgressIndicator(value: progress)
: Container()),
Expanded(
child: Container(
margin: const EdgeInsets.all(10.0),
decoration:
BoxDecoration(border: Border.all(color: Colors.blueAccent)),
child: InAppWebView(
initialUrl: "https://flutter.dev/",
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
)),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.url = url;
});
},
onLoadStop:
(InAppWebViewController controller, String url) async {
setState(() {
this.url = url;
});
},
onProgressChanged:
(InAppWebViewController controller, int progress) {
setState(() {
this.progress = progress / 100;
});
},
),
),
),
ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Icon(Icons.arrow_back),
onPressed: () {
if (webView != null) {
webView.goBack();
}
},
),
RaisedButton(
child: Icon(Icons.arrow_forward),
onPressed: () {
if (webView != null) {
webView.goForward();
}
},
),
RaisedButton(
child: Icon(Icons.refresh),
onPressed: () {
if (webView != null) {
webView.reload();
}
},
),
],
),
])),
);
}
}

Screenshots: iOS & Android

Check the package document to view all info.

That’s it we’re done for part1 of this advanced webview, do stay updated by subscribing to my channel to receive updates when other sessions is been posted.

Source code with more functionalities 👇

I hope you have learned something, kindly press the clap button as many times you want if you enjoy it, and feel free to ask a question. Thanks for reading

I hope you have learned one thing or the other, kindly give this article much appreciation you want if you enjoy it, feel free to ask a question and leave a comment if you feel like it 🤭. Thanks for reading and see you in the next series.

🔗 Let’s Connect 🔗 → Github | Twitter | Youtube | WhatsApp | LinkedIn | Patreon | Facebook.

Join the Flutter Dev Community 👨‍💻👨‍💻 → Facebook | Telegram | WhatsApp | Signal.

Subscribe to my Telegram channel | Youtube channel | and also to the medium newsletter in the input box above or below👆👆. Thanks

Happy Fluttering 🥰👨‍💻

Hi, I run the YouTube channel called TechWithSam! I’m passionate about learning and teaching programming majorly Flutter for the moment.