How to add inline HTML in Webview Flutter
Published in
3 min readJun 28, 2021
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: flutterRemember 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!
Buy me Coffee
