Load Html CSS content in Flutter App

byRakibul hasan -
0




 Step1 :

Add Dependencies:

webview_flutter: ^2.0.13

Create asset folder and create html_data.json

# To add assets to your application, add an assets section, like this:
assets:
- assets/html_data.json



Step 2:
{
"html": "<div style='color: blue; font-size: 24px;'>Hello, <span style='font-weight: bold;'>Flutter</span>!</div><br/><table style='width:100%; border-collapse: collapse; border: 1px solid black;'><thead style='background-color: #f0f0f0;'><tr><th style='font-size: 18px; font-weight: bold; color: green; padding: 10px; border: 1px solid #ddd;'>Header 1</th><th style='font-size: 18px; font-weight: bold; color: green; padding: 10px; border: 1px solid #ddd;'>Header 2</th><th style='font-size: 18px; font-weight: bold; color: green; padding: 10px; border: 1px solid #ddd;'>Header 3</th></tr></thead><tbody><tr style='border: 1px solid #ddd;'><td style='padding: 10px; border: 1px solid #ddd;'>Data 1</td><td style='padding: 10px; border: 1px solid #ddd;'>Data 2</td><td style='padding: 10px; border: 1px solid #ddd;'>Data 3</td></tr><tr style='background-color: #f2f2f2; border: 1px solid #ddd;'><td style='padding: 10px; border: 1px solid #ddd;'>David</td><td style='padding: 10px; border: 1px solid #ddd;'>23</td><td style='padding: 10px; border: 1px solid #ddd;'>Men</td></tr><tr style='border: 1px solid #ddd;'><td style='padding: 10px; border: 1px solid #ddd;'>John</td><td style='padding: 10px; border: 1px solid #ddd;'>30</td><td style='padding: 10px; border: 1px solid #ddd;'>Men</td></tr><tr style='background-color: #f2f2f2; border: 1px solid #ddd;'><td style='padding: 10px; border: 1px solid #ddd;'>Jane</td><td style='padding: 10px; border: 1px solid #ddd;'>25</td><td style='padding: 10px; border: 1px solid #ddd;'>Women</td></tr></tbody></table>",
"css": "body { background-color: #f0f0f0; }"
}


Step 3:
import 'package:flutter/material.dart';

import 'dart:convert';

import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyWebView(),
);
}
}

class MyWebView extends StatefulWidget {
@override
_MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
late String htmlContent = '';
late String cssContent='';

@override
void initState() {
super.initState();
loadHtmlData();
}

Future<void> loadHtmlData() async {
try {
final String jsonContent = await DefaultAssetBundle.of(context).loadString('assets/html_data.json');
print("JSON Content: $jsonContent"); // Print the content for debugging
final Map<String, dynamic> jsonData = json.decode(jsonContent);

final String htmlContent = jsonData['html'] ?? "<div>No HTML content</div>";
final String cssContent = jsonData['css'] ?? "body { background-color: white; }";

setState(() {
this.htmlContent = htmlContent;
this.cssContent = cssContent;
});
} catch (e) {
print("Error loading HTML data: $e");
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('HTML with CSS'),
),
body: htmlContent.isNotEmpty
? WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {
webViewController.loadUrl(
Uri.dataFromString(
'''
<html>
<head>
<style>
$cssContent
</style>
</head>
<body>
$htmlContent
</body>
</html>
''',
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
).toString(),
);
},
)
: Center(child: CircularProgressIndicator()),
);
}
}


Load With HTML CSS Javascript:

With In App Webview:

// import 'dart:convert';

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

// class MyWebView extends StatefulWidget {
// @override
// _MyWebViewState createState() => _MyWebViewState();
// }

// class _MyWebViewState extends State<MyWebView> {
// late String htmlContent = '';
// late String cssContent = '';
// late String javascriptCode = '';

// @override
// void initState() {
// super.initState();
// loadHtmlData();
// }

// Future<void> loadHtmlData() async {
// try {
// final String jsonContent = await DefaultAssetBundle.of(context)
// .loadString('assets/html_data.json');
// final Map<String, dynamic> jsonData = json.decode(jsonContent);

// final String htmlContent =
// jsonData['html'] ?? "<div>No HTML content</div>";
// final String cssContent =
// jsonData['css'] ?? "body { background-color: white; }";

// final String javascriptCode =
// jsonData['javascript'] ?? "// Default JavaScript code";

// setState(() {
// this.htmlContent = htmlContent;
// this.cssContent = cssContent;
// this.javascriptCode = javascriptCode;
// });
// } catch (e) {
// print("Error loading HTML data: $e");
// }
// }

// @override
// Widget build(BuildContext context) {
// return Scaffold(
// appBar: AppBar(
// title: Text('HTML with CSS'),
// ),
// body: htmlContent.isNotEmpty
// ? InAppWebView(
// initialData: InAppWebViewInitialData(
// data: '''
// <html>
// <head>
// <style>
// $cssContent
// </style>
// <script>
// $javascriptCode
// </script>
// </head>
// <body>
// $htmlContent
// </body>
// </html>
// ''',
// mimeType: 'text/html',
// encoding: 'utf8',
// ),
// onWebViewCreated: (InAppWebViewController controller) {
// controller.addJavaScriptHandler(
// handlerName: 'sendMessageToFlutter',
// callback: (args) {
// print("Message from JavaScript: $args");
// },
// );
// },
// )
// : Center(child: CircularProgressIndicator()),
// );
// }
// }



Json Data:
{
"html": "<div style='color: blue; font-size: 24px;'>Hello, <span style='font-weight: bold;'>Flutter</span>!</div><br/><table style='width:100%; border-collapse: collapse; border: 1px solid black;'><thead style='background-color: #f0f0f0;'><tr><th style='font-size: 18px; font-weight: bold; color: green; padding: 10px; border: 1px solid #ddd;'>Header 1</th><th style='font-size: 18px; font-weight: bold; color: green; padding: 10px; border: 1px solid #ddd;'>Header 2</th><th style='font-size: 18px; font-weight: bold; color: green; padding: 10px; border: 1px solid #ddd;'>Header 3</th></tr></thead><tbody><tr style='border: 1px solid #ddd;'><td style='padding: 10px; border: 1px solid #ddd;'>Data 1</td><td style='padding: 10px; border: 1px solid #ddd;'>Data 2</td><td style='padding: 10px; border: 1px solid #ddd;'>Data 3</td></tr><tr style='background-color: #f2f2f2; border: 1px solid #ddd;'><td style='padding: 10px; border: 1px solid #ddd;'>David</td><td style='padding: 10px; border: 1px solid #ddd;'>23</td><td style='padding: 10px; border: 1px solid #ddd;'>Men</td></tr><tr style='border: 1px solid #ddd;'><td style='padding: 10px; border: 1px solid #ddd;'>John</td><td style='padding: 10px; border: 1px solid #ddd;'>30</td><td style='padding: 10px; border: 1px solid #ddd;'>Men</td></tr><tr style='background-color: #f2f2f2; border: 1px solid #ddd;'><td style='padding: 10px; border: 1px solid #ddd;'>Jane</td><td style='padding: 10px; border: 1px solid #ddd;'>25</td><td style='padding: 10px; border: 1px solid #ddd;'>Women</td></tr></tbody></table>",
"css": "body { background-color: #f0f0f0; }",
"javascript": "console.log('Hello from JavaScript!');"
}



With Webview:

import 'dart:convert';

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

class MyWebView extends StatefulWidget {
@override
_MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
late String htmlContent = '';
late String cssContent = '';
late String javascriptCode = '';

@override
void initState() {
super.initState();
loadHtmlData();
}

Future<void> loadHtmlData() async {
try {
final String jsonContent = await DefaultAssetBundle.of(context)
.loadString('assets/html_data.json');
print("JSON Content: $jsonContent"); // Print the content for debugging
final Map<String, dynamic> jsonData = json.decode(jsonContent);

final String htmlContent =
jsonData['html'] ?? "<div>No HTML content</div>";
final String cssContent =
jsonData['css'] ?? "body { background-color: white; }";

final String javascriptCode =
jsonData['javascript'] ?? "console.log('Default JavaScript code loaded');";


setState(() {
this.htmlContent = htmlContent;
this.cssContent = cssContent;
this.javascriptCode = javascriptCode;
});
} catch (e) {
print("Error loading HTML data: $e");
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('HTML with CSS'),
),
body: htmlContent.isNotEmpty
? WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {
webViewController.loadUrl(
Uri.dataFromString(
'''
<html>
<head>
<style>
$cssContent
</style>
<script>
$javascriptCode
</script>
</head>
<body>
$htmlContent
</body>
</html>
''',
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
).toString(),
);
},
javascriptMode: JavascriptMode.unrestricted, // Enable JavaScript
javascriptChannels: <JavascriptChannel>[
JavascriptChannel(
name: 'Console',
onMessageReceived: (JavascriptMessage message) {
print("Console Message: ${message.message}");
},
),
].toSet(),
onPageFinished: (String url) {
// This is called when the web view finishes loading
print("Page finished loading: $url");
},
onPageStarted: (String url) {
// This is called when the web view starts loading
print("Page started loading: $url");
},
navigationDelegate: (NavigationRequest request) {
// Handle navigation requests if needed
return NavigationDecision.navigate;
},
)
: Center(child: CircularProgressIndicator()),
);
}
}

Tags:
Rakibul hasan

I am Rakibul hasan,Front and Back-End Developer.I am also good at database like mysql,Firebase,mssql. I'm a Workaholic Person and I love my job as a mobile application developer i never get tired for it. Its been always fasinating to me working for new creation. I am very passionate about my work.I do my job passionately and dedicatedly.I try to do my project with clean code and gather efficiency. The greatest quality of mine is patience.I can code all day long. I never feel bored during coding and i can't take rest until my code is completed.I can adapt anything very quickly. I am also very sincere,responsible,hard working and confident regarding my works.Each and Every Project is important to me and I like to take Challenge.

Post a Comment

Previous Post Next Post