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

Outline

  1. InAppWebview
  2. InAppBrowser
  3. ChromeSafariBrowser

PART ONE — InAppWebView.

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Discord To GitHub

The Art Of Programming #3

Raspberry Pi — scraping websites with selenium

Alchemix Farm Migration Post Mortem and alETH Update

Executable Transactions: Transaction Inside Transaction (Part-1)

Guide On How To Receive Emails Using Java Mail API

What makes a developer a top performer?

The Future of Mobile App Design in 2019

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
Samuel Adekunle (techwithsam)

Samuel Adekunle (techwithsam)

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

More from Medium

Flutter: first impression

Flutter + Firebase setup on Android & IOS

Fix AMSupportURLConnectionDelegate in your flutter app.

Flutter: BLoC + Freezed — Write less code