How to add inline HTML in Webview Flutter

Connel Asikong
Jun 28 · 3 min read
Photo by Ahmad Odeh on Unsplash

I thought you’d be dancing too after viewing the image above ’cause I am right now! Haha…

Okay back to the business of the day… I’m not going to go through all that “create a flutter app, blah blah blah”. I believe you can or have already created a Flutter app already, I believe in You!

Now I have dart file named: Webview.dart.

import 'package:flutter/material.dart';

class Webview extends StatefulWidget {
@override
_WebviewState createState() => _WebviewState();
}

class _WebviewState extends State<Webview> {
@override
Widget build(BuildContext context) {
return Container();
}
}

So this is what we have, we need to add Flutter_Webview package to our .yaml:

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: ^1.0.2
webview_flutter: ^2.0.9

dev_dependencies:
flutter_test:
sdk: flutter

Remember to change your minSDKVersion: android > app > build.gradle

defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "connelblaze.cb.ranqz"
minSdkVersion 20
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}

Then add the permission to your Manifest file:

<manifest...
>
<uses-permission android:name="android.permission.INTERNET" />
...
<application

Now back to our dart file, main.dart:

import 'package:flutter/material.dart';
import 'package:ranqz/screen/Home.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: Home(),
);
}
}

Home.dart:

import 'package:flutter/material.dart';
import 'package:ranqz/screen/Webview.dart';

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Container(
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => Webview()));

},
child: Text("Go to webview"),
),
),
),
);
}
}

Webview.dart:

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class Webview extends StatefulWidget {
@override
_WebviewState createState() => _WebviewState();
}

class _WebviewState extends State<Webview> {
final Completer<WebViewController> _controller =
Completer<WebViewController>();
WebViewController _con;

/*
*
* Webview
* */

String setHTML(String email, String phone, String name) {
return ('''
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body style="background-color:#fff;height:100vh ">

<div style="width: 50%; margin: 0 auto;margin-top: 200px">
<table class="table table-striped">
<tbody>
<tr>
<th>Name</th>
<th>$name</th>
</tr>
<tr>
<th>Email</th>
<td>$email</td>
</tr>
<tr>
<th>Phone</th>
<th>$phone</th>
</tr>
</tbody>
</table>
<a type="button" class="btn btn-success" style="width: 210px" href="https://connelevalsam.github.io/connelblaze/">
Submit
</a>
</div>
</body>
</html>


''');
}

_printz() => print("Hello");

_loadHTML() async {
_con.loadUrl(Uri.dataFromString(
setHTML(
"connelblaze@gmil.com",
"+2347034857296",
"Connel Asikong"
),
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8')
).toString());
}


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Webview'),
),
body: Builder(builder: (BuildContext context) {
return WebView(
initialUrl: 'https://flutter.dev',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
// _controller.complete(webViewController);
_con = webViewController;
_loadHTML();
},
onProgress: (int progress) {
print("WebView is loading (progress : $progress%)");
},
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('https://www.youtube.com/')) {
print('blocking navigation to $request}');
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
return NavigationDecision.navigate;
},
onPageStarted: (String url) {
print('Page started loading: $url');
},
onPageFinished: (String url) {
print('Page finished loading: $url');
},
gestureNavigationEnabled: true,
);
}),
);
}

}

Congratulations!!! you can now say: “Mama I made it!

Anyway, you have any comment or anything to say, hit me up.
Or you want to donate to this incredibly handsome young elegant alpha male… You can still hit me up!

Here’s the part 2, using Javascript

cheers and keep coding!

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Connel Asikong

Written by

Programmer, Designer, Promoter, music lover, God fearer. thrilled about technology. wish I could help and do more.

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.