Muchas veces es necesario mostrar un contenido HTML en una aplicación en Flutter, un buen ejemplo de esto te lo puedo mencionar yo mismo, he estado creando una aplicación en Flutter para este blog, que incluye la app de Academia, pero volviendo al blog, al ser contenido HTML; esto que estas leyenco es contenido HTML generado por un plugin de JavaScript de tipo WYSIWYG y que mediante una Rest Api puede ser consumido desde la app en Flutter, así que, necesito alguna forma de presentar este contenido HTML mediante un webview o algo similar.
En esta entrada veremos un plugin que permite mostrar contenido HTML en Flutter mediante un plugin al no existir una solución que forme parte del core de Flutter.
Si estás construyendo una aplicación en Flutter y necesitas renderizar contenido HTML, puedes emplear el paquete flutter_html. Este paquete te permite mostrar contenido HTML dentro de tus widgets de Flutter. A continuación, te explico cómo hacerlo:
Instalación:
Agrega
flutter_html
a las dependencias de tu archivopubspec.yaml
ejecutando el siguiente comando:flutter pub add flutter_html
Luego, obtén las dependencias con:
flutter pub get
Uso:
Importa el paquete en tu archivo de código:
import 'package:flutter_html/flutter_html.dart'; import 'package:flutter_html/style.dart'; // Para usar estilos CSS
Utiliza el widget
Html
para renderizar el contenido HTML:Dart
Html( data: /* Tu fuente HTML */, style: { /* Estilos CSS (no son CSS reales) */ 'h1': Style(color: Colors.red), 'p': Style(color: Colors.black87, fontSize: FontSize.medium), 'ul': Style(margin: EdgeInsets.symmetric(vertical: 20)), }, )
En el ejemplo anterior, puedes proporcionar tu propio HTML en lugar de
/* Tu fuente HTML */
. Los estilos se aplican utilizando un mapa donde las claves son los nombres de las etiquetas HTML y los valores son objetosStyle
.Ejemplo Completo:
Aquí tienes un ejemplo completo de cómo usar
flutter_html
:import 'package:flutter/material.dart'; import 'package:flutter_html/flutter_html.dart'; import 'package:flutter_html/style.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, title: 'Mi App con HTML', home: HomePage(), ); } } class HomePage extends StatelessWidget { final _htmlContent = """ <div> <h1>Este es un título</h1> <p>Este es un <strong>párrafo</strong>.</p> <p>Me gustan los <i>perros</i></p> <ul> <li>Elemento de lista 1</li> <li>Elemento de lista 2</li> <li>Elemento de lista 3</li> </ul> <img src='https://www.kindacode.com/wp-content/uploads/2020/11/my-dog.jpg' /> </div> """; const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Mi App con HTML')), body: SafeArea( child: SingleChildScrollView( child: Html( data: _htmlContent, style: { 'h1': Style(color: Colors.red), 'p': Style(color: Colors.black87, fontSize: FontSize.medium), 'ul': Style(margin: EdgeInsets.symmetric(vertical: 20)), }, ), ), ), ); } }
En este ejemplo, se muestra el contenido HTML con estilos personalizados, es muy interesante la parte que permite personalizar el CSS del HTML renderizado, con lo cual, podemos mostrar un estilo personalizado por nosotros y no el estilo por defecto en HTML.
![Andrés Cruz Andrés Cruz](/public/images/perfil.jpg)
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter