NO uses los Webview en Flutter para MOSTRAR Contenido HTML, mejor usa ESTO...
Quiero mostrarte una posible variante o mejor dicho opción así quieres representar un contenido HTML y hago énfasis en un contenido HTML en vez de emplear los webview en Flutter con todos los problemas que me trajo y que te lo dejo aquí en la siguiente tarjeta en caso de que también quieras ver ese video encontrar una forma mucho más sencilla y mucho más directa que te va a funcionar en cualquier tipo de aplicación en Flurer que tú quieras implementar a lo que me refiero si la quieres lanzar para iOS si la quieres lanzar para Android si la quieres pasar para ejecutar el Linux en web tú me entiendes en cualquier cosa en cualquiera de las plataformas que permite Flutter.
Traduce el HTML a Widgets
Traducir tus contenidos HTML a widgets nativos, ya con eso pude como quien dice resolver el problema que el problemón que tenía antes por supuesto voy haciendo aquí una aclaratoria en caso de que todavía no se entienda muy bien:
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;
}
Como puedes ver, recibes el contenido HTML y lo conviertes en bases a las etiquetas que tenga el contenido al widget que más se asemeje. De esta forma, al emplear widets nativos, puedes mostrar esta página en cualquier plataforma soportada por Flutter.
Ventajas
Las ventajas que nos trae este esquema con respecto al visor no solamente el soporte a cualquier plataforma, si no, que ahora puedes hacer el contenido interactivo, agregando opciones como en mi caso es poder darle formato al código, selección de texto y en resumen, cualquier funcionalidad que permita Flutter sobre los widgets, operaciones que no puedes implementar de manera nativa en un visor.