Renderizar contenido HTML en Flutter

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 archivo pubspec.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 objetos Style.

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.

Flutter

HTML

CSS

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy