Using of WebView in the mobile app might sound lame but you have seen it used by many popular apps.
There will be a situation where you will be required to show some pages like a privacy policy. Now, these pages you will already have on your website and you might want to display on the app.
One way
is to code it in the app or show it on the web page. So follow this tutorial of
how to use WebView in Flutter.
The displaying of some policy page might be one way of showing its use but there are plenty of other use cases.
I had built a news app, you can check in play
store. In this app, I have used JSON to get news feeds but some news website
did not provide complete news. So as a solution, I used WebView to display the
news.
In
order to display the web page in the app, we will use a plugin called webview_flutter developed
by Flutter
Dev Team.
The webview_flutter plugin
provides a WebView widget. On iOS, the WebView widget is backed by a WKWebView and
on Android, the WebView widget is backed by a WebView.
So, let’s learn how to use this.
Setting Up For WebView In Flutter Project
As
usual, let us start by creating a new flutter project. I have named my project flutter_webview.
Next, we will
add following files under the lib directory.
- main.dart
- home_page.dart
We will have
two different files so that we can have better code formatting. If you want,
you can put everything in the same file.
Adding WebView Dependency
As I have
mentioned in the introductory part, we will add the webview_flutter plugin as
our dependency file. You can check the plugin page and read about it here.
So
to add the dependency, open your pubsec.yaml file
and add dependency as shown below:
dependencies:
webview_flutter: ^0.3.22+1
Note: Mind the indentation!! Please check there is
proper indentation while editing the pubsec.yaml file.
Now you can save the file. The dependency should be
automatically downloaded. If not you can click the “Get Packages” button. Which
will be on the top right side, when you open the pubsec.yaml file.
Alternatively, you can run below code from the terminal:
$ flutter pub get
If you want
to run only on Android devices, you are ready to go. As using Flutter to build
app means you want a single code base for both Android and IOS. For IOS we need
to add just two lines.
Adding IOS Dependency
To
make the WebView plugin work on IOS devices, we need to add the following two
lines in the Info.plist file.
<dict>
...
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
...
To find
Info.plist file, in your project folder go to ios -> Runner ->
Info.plist. Now add the above line to the file.
Coding The
WebView In Flutter App
We
have created the project and added the required dependency. Now we will make it
work by coding our main.dart and home_page.dart files.
Editing Main.Dart File:
We will first
open the main.dart file and remove all its existing content. Then add the
following lines of code to the file.
import 'package:flutter/material.dart';
import 'package:flutter_webview/home_page.dart';
void main() {
runApp(HomePage());
}
We have
imported the material package. Material
is an adaptable system of guidelines, components, and tools that support the
best practices of user interface design.
Even
though our home_page.dart file is empty, we
have imported it. Not to worry, we will edit that in a moment.
Our
Next line is a function main(). The main function would be called every time we run the app.
Inside this function, we use runApp method to call the HomePage(). For now, you will see
an error in the line where we have a HomePage(). We will define this in the
home_page.dart file next.
Editing
Home_page.Dart File
Here we will
add our main WebView codes. Open the home_page.dart file and add the following
line of code. Don’t be overwhelmed by the codes that you see. It is pretty
simple to understand.
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
{
@override
Widget
build(BuildContext context) {
return
MaterialApp(
home:
Scaffold(
appBar: AppBar(
title: Text('InstaCodeBlog'),
),
body: Column(
children: [
Expanded(
child: WebView(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: 'https://instacodeblog.com/',
),
),
],
),
),
);
}
}
We start the code by importing the material package and the
webview_flutter package. Remember the one we added in dependency.
Next, we
define the Homepage class as a stateful widget. So the HomePageState class will
return MaterialApp widget, which contains Scaffold.
The
scaffold has other parameters but for this tutorial, we use AppBar and Body.
AppBar will contain the title which we have set to ‘InstaCodeBlog’ and body section will
display our blog page with WebView widget.
WebView widget is one we get from webview_flutter package.
The javascriptMode by default is set
to false, it is up to you if you want to use or not. As my blog page uses
JavaScript, I have enabled it.
Run Your App
Well, that is
all, it is that simple. Now, let us run the code. Make sure you have saved all
the files and no error exists on our two dart files.
Conclusion
In this tutorial of how to use WebView in Flutter tutorial, you have developed a fully working mobile app for both Android and IOS using a single codebase.
With the use of Flutter, you made WebView app in around 50 lines of code.