DON'T use Webviews in Flutter to DISPLAY HTML Content, use THIS instead...
I want to show you a possible variant or rather option if you want to represent HTML content and I emphasize HTML content instead of using webviews in Flutter with all the problems that it brought me and I'll leave it here in the next card in case you also want to see that video to find a much simpler and much more direct way that will work for you in any type of application in Flutter that you want to implement. What I mean is, if you want to launch it for iOS, if you want to launch it for Android, if you want to move it to run Linux on the web, you understand me, in anything on any of the platforms that Flutter allows.
Translate HTML to Widgets
Translate your HTML content into native widgets, and with that I was able to, so to speak, solve the problem that I had before. Of course, I'm making a clarification here in case it's still not very clear:
import 'package:html/parser.dart' as htmlParser;
import 'package:html/dom.dart' as html_dom;
***
List<Widget> showSectionBookByHTML(
String html,
String tokenUser,
int bookSectionId,
Function noteAdd,
BuildContext context, [
Map<String, BookSectionNoteModel> bookSectionNotesModel = const {},
double sizeText = 1.0,
]) {
List<Widget> widgets = [];
List<html_dom.Element> elementsHtml = parseHTMLContent(html);
for (var element in elementsHtml) {
print(element.localName);
switch (element.localName) {
case 'h1':
widgets.add(
Padding(
padding: const EdgeInsets.only(top: 20, bottom: 10),
child: Text(
element.text,
style: TextStyle(
fontSize: 45 * sizeText,
fontFamily: 'IBMPlexMono',
),
),
),
);
break;
case 'h2':
widgets.add(
Padding(
padding: const EdgeInsets.only(top: 20, bottom: 10),
child: SelectableText(
element.text,
style: TextStyle(
fontSize: 35 * sizeText,
fontFamily: 'IBMPlexMono',
),
),
),
);
break;
case 'h3':
widgets.add(
Padding(
padding: const EdgeInsets.only(top: 20, bottom: 10),
child: SelectableText(
element.text,
style: TextStyle(
fontSize: 30 * sizeText,
fontFamily: 'IBMPlexMono',
),
),
),
);
break;
case 'h4':
widgets.add(
Padding(
padding: const EdgeInsets.only(top: 20, bottom: 10),
child: SelectableText(
element.text,
style: TextStyle(fontSize: 25 * sizeText),
),
),
);
break;
case 'h5':
widgets.add(
Padding(
padding: const EdgeInsets.only(top: 20, bottom: 10),
child: SelectableText(
element.text,
style: TextStyle(fontSize: 20 * sizeText),
),
),
);
break;
case 'h6':
widgets.add(
Padding(
padding: const EdgeInsets.only(top: 20, bottom: 10),
child: SelectableText(
element.text,
style: TextStyle(fontSize: 18 * sizeText),
),
),
);
break;
case 'ul':
if (element.children.isNotEmpty) {
element.children.forEach((e) {
widgets.add(
_hightlightText(
"⚬ ${e.text}",
bookSectionNotesModel,
element.attributes['id'] ?? '',
"",
16 * sizeText,
tokenUser,
bookSectionId,
noteAdd,
context,
),
);
});
widgets.add(SizedBox(height: 15));
}
break;
case 'p':
// img
if (element.children.isNotEmpty &&
element.children[0].localName == 'img') {
String? src = element.children[0].attributes['src'];
if (src != null) {
widgets.add(
Padding(
padding: const EdgeInsets.only(top: 15, bottom: 15),
child: Image.network(baseUrlAcademy + src),
),
);
}
}
//*** p
// child
var idChild2 = '';
if (element.children.isNotEmpty) {
// posiblemente un span dentro del p
idChild2 = element.children[0].attributes['id'] ?? '';
}
widgets.add(
Padding(
padding: const EdgeInsets.only(bottom: 15),
child: _hightlightText(
element.text,
bookSectionNotesModel,
element.attributes['id'] ?? '',
idChild2,
16 * sizeText,
tokenUser,
bookSectionId,
noteAdd,
context,
),
),
);
break;
case 'pre':
widgets.add(
Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: CodeView(code: element.text),
),
);
break;
}
}
return widgets;
}
List<html_dom.Element> _parseHTMLContent(String html) {
var document = html_parser.parse(html);
var body = document.body!.children;
}
As you can see, you receive the HTML content and convert it based on the content's tags to the widget that most closely resembles it. This way, by using native widths, you can display this page on any platform supported by Flutter.
Advantages
The advantages that this scheme brings us with respect to the viewer are not only the support for any platform, but also the fact that you can now make the content interactive, adding options such as, in my case, being able to format the code, select text, and, in short, any functionality that Flutter allows on widgets, operations that you cannot implement natively in a viewer.