Hi Guy’s Welcome to Proto Coders Point.
Are you looking for a easiest way to integrate InApp WebView in Futter app? Now need to research anymore! In this Flutter Article blog, we will be exploring Flutter InAppWebView. From understanding what web views and headless web views are.
Flutter is booming now a days as it has revolutionized the way that the developers are create mobile applications as well as web, desktop using flutter frameware that too with its fast development times and excellent performance capabilities. Flutter framework has the ability to integrate webviews seamlessly into the Flutter application. Flutter_InAppWebView is a powerful package using which a flutter developer can create highly interactive and responsive web-embedded apps to show external third party website pages into flutter app itself.
What is webview in Flutter?
Support you are building a Flutter Application, and want to show a external website page into the app for this you can make use of Flutter Webview. Basically a Web View allows a developers to embed a web page into a mobile application.
What is headless WebView?
A Headless WebView, is basically a Webview that don’t display any content from the web page. Instead the website/web page content get’s loaded at background and the developers can use it to get data from the website and use it for building flutter app. This headless Webview is now a days used for web-based API’s.
Adding the InAppWebView Widget into your Flutter App
Integrating InAppWebView widget into your Flutter app is much easy then you think. Now with just a few lines of code, You can build a awesome web-embedded Flutter Application where you can load you website into flutter app.
Integrating InApp Webview in Flutter App – Example
To Add InApp Webview into flutter app we will make use of flutter_inappwebview library, This flutter package will help you to open an in-app browser window.
InAppWebView Widget Syntax
InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse("https://protocoderspoint.com/")
),
onWebViewCreated: (InAppWebViewController controller){
inAppWebViewController = controller;
},
onProgressChanged: (InAppWebViewController controller , int progress){
setState(() {
_progress = progress / 100;
});
},
),
In InAppWebView widget there are various properties though which you can customize WebView in Flutter, Out of all those i have make used of:
initialUrlRequest: used to load a website or web page through URL.
onWebViewCreated(): This property is used to take control to the webview, Using this the flutter developer can attach a InAppWebViewController so that developer can create a controller for the webview and handle it.
onProgressChanged(): This function is been used to get the progress of how much percentage the website is loaded.
Complete Source Code Example – Flutter InAppWebView
In Below Code I have make used of a Stack Widget so that I can show a Webview and a progress indicator, Through Progress Indicator the app user can understand how much percentage of webview is loaded.
To handle webview to navigate to previous page that the user has open in the webview, I am using WillPopScope Widget to check on backpress is the webview can go back, if it can go back then go back one step to previous Web Page within the WebView.
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
class MyWebsite extends StatefulWidget {
const MyWebsite({Key? key}) : super(key: key);
@override
State<MyWebsite> createState() => _MyWebsiteState();
}
class _MyWebsiteState extends State<MyWebsite> {
double _progress = 0;
late InAppWebViewController inAppWebViewController;
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: ()async{
var isLastPage = await inAppWebViewController.canGoBack();
if(isLastPage){
inAppWebViewController.goBack();
return false;
}
return true;
},
child: SafeArea(
child: Scaffold(
body: Stack(
children: [
InAppWebView(
initialUrlRequest: URLRequest(
url: Uri.parse("https://protocoderspoint.com/")
),
onWebViewCreated: (InAppWebViewController controller){
inAppWebViewController = controller;
},
onProgressChanged: (InAppWebViewController controller , int progress){
setState(() {
_progress = progress / 100;
});
},
),
_progress < 1 ? Container(
child: LinearProgressIndicator(
value: _progress,
),
):SizedBox()
],
),
),
),
);
}
}
Flutter InAppWebView Example
Video Tutorial
