I am using flutter_html: ^3.0.0-beta.2 package for showing my HTML data. I am using a parser class where I am providing the HTML data and its name for it. My issue is that when I am providing style to my image, like alignment, it cannot show the image in my HTML view. This is my html data
data: '''
<html>
<head></head>
<body>
<p>Test</p>
<figure class="image">
<img src=";w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</figure>
<p> </p>
<p>Tests</p>
<figure class="image image_resized" style="width:87.93%;">
<img src=";w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</figure>
<p> </p>
<p> </p>
<p>Test</p>
<figure class="image">
<img src=";w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</figure>
</body>
</html>
''',
but when I view the data, it cannot view the second image as it has some style that it cannot view in my app. but it can show in any html viewer on the web,
``` import 'dart:developer';import 'package:flutter/material.dart'; import 'package:flutter_html/flutter_html.dart'; import 'package:url_launcher/url_launcher.dart';
import 'package:html/parser.dart' as html_parser;
class HtmParserWidget extends StatelessWidget { final String htmlData; final String baseUrl; // this base url is basically login url
HtmParserWidget({ Key? key, required this.htmlData, this.baseUrl = "", // Default base URL }) : super(key: key);
@override Widget build(BuildContext context) { // Modify the HTML content to prepend base URL to image src attributes final modifiedHtmlData = _addBaseUrlToImages(htmlData); debugPrint("AAAAAAAA${baseUrl}"); log("Modified HTML:\n$modifiedHtmlData");
return Html(
//data: modifiedHtmlData.isNotEmpty ? modifiedHtmlData : "<p>No content available</p>",
data: '''
<html>
<head></head>
<body>
<p>Test</p>
<figure class="image">
<img src=";w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</figure>
<p> </p>
<p>Tests</p>
<figure class="image image_resized" style="width:87.93%;">
<img src=";w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</figure>
<p> </p>
<p> </p>
<p>Test</p>
<figure class="image">
<img src=";w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</figure>
</body>
</html>
''',
style: {
"table": Style(
backgroundColor: const Color.fromARGB(0x50, 0xee, 0xee, 0xee),
),
"th": Style(
padding: HtmlPaddings.all(6),
backgroundColor: Colors.grey,
),
"td": Style(
padding: HtmlPaddings.all(6),
border: const Border(bottom: BorderSide(color: Colors.grey)),
),
'h5': Style(maxLines: 2, textOverflow: TextOverflow.ellipsis),
'flutter': Style(
display: Display.block,
fontSize: FontSize(5),
),
".second-table": Style(
backgroundColor: Colors.transparent,
),
".second-table tr td:first-child": Style(
fontWeight: FontWeight.bold,
textAlign: TextAlign.end,
),
},
onLinkTap: (url, _, __) {
if (url != null) {
_launchURL(url: url);
}
},
onCssParseError: (css, messages) {
debugPrint("CSS error in: $css");
for (var message in messages) {
debugPrint("Error: $message");
}
},
shrinkWrap: true,
);
}
// add base url before the img tag String _addBaseUrlToImages(String htmlData) {
var document = html_parser.parse(htmlData);
var images = document.querySelectorAll('img');
for (var img in images) {
var src = img.attributes['src'];
if (src != null && !(src.startsWith('http')||src.startsWith('https'))) {
img.attributes['src'] = '$baseUrl$src';
}
}
return document.outerHtml;
}
// Launches a URL using the default system browser. Future _launchURL({required String url}) async { if (url.isEmpty) { debugPrint("URL is empty, skipping launch."); return; }
final uri = Uri.tryParse(url.startsWith("http") ? url : "$baseUrl$url");
if (uri != null && await canLaunchUrl(uri)) {
await launchUrl(uri);
} else {
debugPrint("Could not launch $url");
throw 'Could not launch $url';
}
} }
The main thing is that when a HML image has a style like this or any style, it cannot run on my mobile.
``` <figure class="image image_resized" style="width:87.93%;">
<img src=";w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</figure>```
I need a solution for this so that I can rander any image with style.