Flutter WebView

dependencies:
flutter:
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 {
@override
_MyWebViewState createState() => _MyWebViewState();
}

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Profile"),
),
body: WebView(
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
onPageFinished: (url) {
print("Loaded $url");
},
));
}
}
<html>
<head>
<title>Sample page</title>
<script>
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) {}
}
</script>
<style type="text/css">
#btn_color {
display: block;
margin: auto;
}
#container_box {
height: 500px;
width: 150px;
border: 1px solid #000 ;
margin: 0 auto;
}

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("$_inital"),
),
body: WebView(
onWebViewCreated: (webViewController) {
_controller = webViewController;
_loadHtmlFromAssets();
},
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: Set.from([
JavascriptChannel(
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');
_controller.loadUrl(Uri.dataFromString(fileText,
mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
.toString());
}
}
Here when button has pressed the color of div and title in the appbar is changed
class MyWebView3 extends StatefulWidget {
@override
_MyWebView3State createState() => _MyWebView3State();
}

class _MyWebView3State extends State<MyWebView3> {
@override
Widget build(BuildContext context) {
List urls = [
"https://flutter.dev/",
"https://google.com/",
"https://github.com/yubarajpoudel"
];
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()
..add(Factory<VerticalDragGestureRecognizer>(
() => 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?