In this article we’ll show you how to integrate and use the Flutter Webview. A webview is an important element in mobile applications which allows users browse web pages in the app screen itself. This basically means loading HTML, CSS, and JavaScript into a native mobile application. Here, we are going to explore the webview package in the Flutter ecosystem. The package name is webview_flutter. This package provides us with a simple WebView widget that enables us to access webpages in the Flutter application and browse through them. The package supports both the Android and iOS platforms. Along with the integration of this package in the Flutter project, we are also going to learn how to use it in a proper way. The tutorial also demonstrates the standard way of coding in the Flutter ecosystem to make the code clean and easy to understand. So, let’s get started!
Create a new Flutter project
First, we need to create a new Flutter project. For that, make sure that the Flutter SDK and other Flutter app development related requirements are properly installed. If everything is properly set up, then in order to create a project, we can simply run the following command in the desired local directory:
flutter create webviewExample
After the project has been set up, we can navigate inside the project directory and execute the following command in the terminal to run the project in either an available emulator or an actual device:
flutter run
After successfully build, we will get the following result in the emulator screen: 
Scaffolding the Project
Now, we need to replace the default template with our own project structure template. First, we need to create a folder called ./screens inside the ./lib folder. Then, inside the ./lib/screens folder, we need to create a new file called HomePage.dart. Inside the HomePage.dart, we are going to implement a simple Stateful widget class returning a Scaffold widget with a basic AppBar and a RaisedButton button. The code for HomePage.dart is shown in the code snippet below:
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Web View Example", style: TextStyle(color: Colors.black87),),
centerTitle: true,
elevation: 0.0,
backgroundColor: Colors.white70,
),
body: Container(
child: Center(
child: RaisedButton(
child: Text("Open Web View"),
onPressed: () {},
),
),
),
);
}
}
Now, we need to replace the default template in the main.dart file and call the HomePage screen in the home option of MaterialApp widget as shown in the code snippet below:
import 'package:flutter/material.dart';
import 'package:webviewExample/screens/HomePage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Web View Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(),
);
}
}
Hence, we will get the result as shown in the code snippet below: 
Install the Flutter Webview Package
Now, we are going to install the webview_flutter package into our Flutter project. For that, we need to add the following line in the dependencies section inside the pubspec.yaml file:
dependencies: webview_flutter: ^1.0.7
This package provides a WebView widget to be used in the Flutter ecosystem. It helps to run webpages inside the Flutter application on both Android and iOS devices. While installing this plugin, check that the minSdkVersion in the ./android/app/build.gardle should be greater than or equal to 19:
minSdkVersion 19
Creating a Web View Screen
Now, we are going to create a Web View screen that will browse the website with the help of the WebView widget. First, we need to create a file called WebViewPage.dart inside the ./lib/screens folder. Then inside the WebViewPage.dart file, we can implement the WebView code as shown in the code snippet below:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewPage extends StatelessWidget {
final String url;
WebViewPage({
@required this.url,
});
final Completer<WebViewController> _controller = Completer<WebViewController>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: WebView(
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
),
);
}
}
Here, we have created a stateless widget class that takes url as a parameter value. This widget class returns the Scaffold widget with the WebView widget as its body. We also have initialized a WebViewController that handles the activities and process of web page loading in the WebView widget. Now in the RaisedButton widget in HomePage.dart file, we can add the code to navigate to WebViewPage screen. For that, we need to use the Navigator method on the onPressed event of the RaisedButton widget as shown in the code snippet below:
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Web View Example", style: TextStyle(color: Colors.black87),),
centerTitle: true,
elevation: 0.0,
backgroundColor: Colors.white70,
),
body: Container(
child: Center(
child: RaisedButton(
child: Text("Open Web View"),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => WebViewPage(
url: "<https://instaflutter.com>",
)));
},
),
),
),
);
}
}
Here, we have passed the url value as instaflutter website. Now once we press on the RaisedButton in the screen, the app navigates to the WebViewPage screen and browsers the webpage mentioned in the URL value. Hence, we can see the result of the WebViewPage screen in the demo below: 
Finally, we have successfully integrated and used the webview_flutter package in the Flutter to browse the webpages in the app itself.
Conclusion
The major goal of this tutorial was to explore the use cases of the flutter webview package to implement the webview in the Flutter application. The availability of this plugin has made it easier to browse webpages inside the Flutter application. All we need to do was to pass a simple URL to the WebView widget provided by the plugin. The configuration of the WebView widget is simple and easy. With this, we can browse through any webpage and load HTML/CSS and JavaScript on the Flutter application. It can be a static webpage binding as well as dynamic. Hope the implementation process shown was easy to understand. The tutorial also makes sure that you learn the proper standards of Flutter coding to make the overall project code clean and concise.
