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.

Outline

  1. InAppWebview
  2. InAppBrowser
  3. ChromeSafariBrowser

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.

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

// rest of your app code
runApp(MyApp());
}
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}
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)

InAppWebView class

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

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(),
);
}
}
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();
}
},
),
],
),
])),
);
}
}

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