Flutter WebView

sdk: flutter

# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
webview_flutter: ^0.3.9+1
class MyWebView extends StatefulWidget {
_MyWebViewState createState() => _MyWebViewState();

class _MyWebViewState extends State<MyWebView> {
String url = "http://yubarajpoudel.com";

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Profile"),
body: WebView(
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
onPageFinished: (url) {
print("Loaded $url");
<title>Sample page</title>
function changeColor() {
var colors = ["black", "red", "green"];
var randonNumber = Math.floor(Math.random() * 3);
var myDiv = document.getElementById("container_box");
myDiv.style.backgroundColor = colors[randonNumber];
try { colorChanged.postMessage(colors[randonNumber]); } catch (err) {}
<style type="text/css">
#btn_color {
display: block;
margin: auto;
#container_box {
height: 500px;
width: 150px;
border: 1px solid #000 ;
margin: 0 auto;

<div id="container_box"></div> <br>
<button id="btn_color" onclick="changeColor()"> Change Color</button>
class _MyWebView2State extends State<MyWebView2> {
WebViewController _controller;
String _inital = "Press button to change color";

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("$_inital"),
body: WebView(
onWebViewCreated: (webViewController) {
_controller = webViewController;
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: Set.from([
name: "colorChanged",
onMessageReceived: (JavascriptMessage result) {
print("message ${result.message}");
setState(() {
_inital = "Color changed to ${result.message}";

_loadHtmlFromAssets() async {
String fileText =
await rootBundle.loadString('assets/pages/samplepage.html');
mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
Here when button has pressed the color of div and title in the appbar is changed
class MyWebView3 extends StatefulWidget {
_MyWebView3State createState() => _MyWebView3State();

class _MyWebView3State extends State<MyWebView3> {
Widget build(BuildContext context) {
List urls = [
List titles = ["flutter site", "google site", "author site"];
return Scaffold(
appBar: AppBar(
title: Text("Webview 3"),
body: ListView.builder(
itemCount: 3,
itemBuilder: (item, index) {
return Container(
height: 200.0,
child: ListTile(
title: Text(titles[index]),
subtitle: WebView(
initialUrl: urls[index],
gestureRecognizers: Set()
() => VerticalDragGestureRecognizer())),




Senior Software engineer | Blogger

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

Recommended from Medium

YouTube Video | Creating An Address Book In JavaScript

Angular’s Vision for the Future

Photo of clouds in the sky over Japan — Photo by Pixabay: https://www.pexels.com/photo/light-sun-cloud-japan-45848/

5 Reasons Why You Should Know The Composite Design Pattern

How to structure large React apps

Building a simple full stack MEAN application — Part 2

Conquering Frontend Mentor — Challenge -

MERNN: To-Do App

Asynchronous programming: futures, async, await

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
Yubaraj poudel

Yubaraj poudel

Senior Software engineer | Blogger

More from Medium

Flutter | Local Notifications Custom Sound

Flutter | GetX | Route Management

Flutter Getx Implementation

What is Flutter?