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

Outline

dependencies:
flutter_inappwebview: ^4.0.0+4

IMPORTANT Note for Android and iOS

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

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

Check the package document to view all info.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store