Flutter WebView
Flutter WebView widget displays a browser like space to show the webpage specified by URL. So, you can display a webpage just like another widget in your mobile application.
Following is a step by step process to use WebView widget in your application.
Step 1 – pubspec.yaml dependencies
Open pubspec.yaml file, and under dependencies add webview_flutter as shown below.
webview_flutter: ^0.3.0
Step 2: Import webview package
Now, you can import webview package in your dart file.
import 'package:webview_flutter/webview_flutter.dart';Step 3: Use WebView widget
Now you can use the WebView widget in your application.
WebViewController _controller;
...
WebView(
initialUrl: 'https://www.tutorialkart.com/',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
),
Example
In the following example, we have built a Flutter Application with a WebView widget.
To recreate this example, create a Flutter Application, follow the above steps and replace the main.dart with the following.
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text("Learn Code Zone"),
),
body: Center(
child: WebView(
initialUrl: 'http://learncodezone.com',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {},
),
),
),
);
}
}
Following is the pubspec.yaml file. Observe the dependencies section.
name: flutter_webview
description: An example Flutter application to demonstrate WebView widget.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
webview_flutter: ^0.3.0
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
Run the application on an Emulator or a physical device, and you should get the following output.
