Flutter está creciendo con sus bibliotecas y su comunidad. Anteriormente, podíamos usar Machine Learning y Flutter juntos para crear aplicaciones poderosas. Ahora, también podemos combinar Flutter y HTML. Si hay una página web HTML estática que queremos representar en nuestra aplicación que se crea con Flutter. Con este paquete flutter_html Flutter, podemos representar la página web completa en la aplicación Flutter.
HTML y Flutter son diferentes, si queremos renderizar una página HTML con CSS en Flutter, parece extraño. Esto significa cómo es posible que el código HTML se muestre en pantalla usando Flutter. Bueno, suena difícil, pero hasta que no se publicó el paquete flutter_html en Flutter. En este artículo, aprenderemos sobre el funcionamiento de esta biblioteca de Flutter mediante la creación de una aplicación de muestra.
Implementación:
Paso 1: Para comenzar, crea un Proyecto Flutter.
Paso 2: Agregar dependencia
En el archivo pubspec.yaml , agregue el paquete flutter_html dentro de la sección de dependencias.
Para instalarlo, ejecute pub get en la terminal de IDE o simplemente presione CTRL+S en Windows para agregarlo.
Paso 3: Dependencia de importación.
En el archivo main.dart, importe la dependencia como:
Dart
import 'package:flutter_html/flutter_html.dart';
Paso 4: Obtenga la página HTML.
Ahora, obtenga la página HTML que queremos mostrar en la pantalla en Flutter. Por ejemplo, estamos tomando un código de muestra HTML:
HTML
const htmlData = r""" <p id='top'><a href='#'>This is the link</a></p> <h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <h5>Header 5</h5> <h6>Header 6</h6> <h3>This is HTML page that we want to integrate with Flutter.</h3> """;
No podemos asignar htmlData al widget de texto, tenemos que usar el paquete flutter_html para representar estos htmlData en la aplicación.
Paso 5: Use el widget HTML() y asigne valores a sus propiedades. Asignaremos htmlData a su propiedad de datos y todas las etiquetas Html a tagsList .
Dart
Html(
data: htmlData,
tagsList: Html.tags,
style: {
"table": Style(
backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
),
"tr": Style(
border: Border(bottom: BorderSide(color: Colors.grey)),
),
"th": Style(
padding: EdgeInsets.all(6),
backgroundColor: Colors.grey,
),
"td": Style(
padding: EdgeInsets.all(6),
alignment: Alignment.topLeft,
),
'h5': Style(maxLines: 2, textOverflow: TextOverflow.ellipsis),
},
),
Código fuente:
Dart
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
const htmlData = r"""
<p id='top'><a href='#'>This is the Link</a></p>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<h3>This is HTML page that we want to integrate with Flutter.</h3>
""";
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('GeeksForGeeks'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Html(
data: htmlData,
tagsList: Html.tags,
style: {
"table": Style(
backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
),
"tr": Style(
border: Border(bottom: BorderSide(color: Colors.grey)),
),
"th": Style(
padding: EdgeInsets.all(6),
backgroundColor: Colors.grey,
),
"td": Style(
padding: EdgeInsets.all(6),
alignment: Alignment.topLeft,
),
'h5': Style(maxLines: 2, textOverflow: TextOverflow.ellipsis),
},
),
),
);
}
}
Producción:
Paso 6: podemos crear etiquetas personalizadas y luego agregarlas a la lista de etiquetas HTML usando la propiedad tagList tagList : HTML.tags..add(‘flutter’). Como aquí, estamos creando una etiqueta ‘flutter’ personalizada y agregándola a la lista de etiquetas HTML. Por ejemplo: <flutter></flutter>
Necesitamos asignar los datos HTML a la propiedad de datos del widget HTML().
Todas las etiquetas HTML, ya sea una etiqueta de tabla o una etiqueta de lista ordenada, son compatibles junto con la funcionalidad de etiquetas personalizadas. También en la propiedad de estilo del widget HTML(), podemos dar estilos a las etiquetas HTML y etiquetas personalizadas. También podemos agregar estilo a las imágenes que se procesan desde redes y dominios. Para una mejor comprensión, consulte el siguiente código.
Código fuente:
Dart
void main() {
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Tutorial',
theme: new ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
const htmlData = r"""
<body style="background-color:powderblue;">
<h3>Support for math equations:</h3>
Solve for <var>x<sub>n</sub></var>: log<sub>2</sub>(<var>x</var><sup>2</sup>+<var>n</var>) = 9<sup>3</sup>
<h3>Inline Styles:</h3>
<p>This should be <span style='color: blue;'>BLUE style='color: blue;'</span></p>
<h3>Table support (with custom styling!):</h3>
<table>
<colgroup>
<col width="50%" />
<col span="2" width="25%" />
</colgroup>
<thead>
<tr><th>One</th><th>Two</th><th>Three</th></tr>
</thead>
<tbody>
<tr>
<td rowspan='2'>Rowspan</td><td>Data</td><td>Data</td>
</tr>
<tr>
<td colspan="2"><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></td>
</tr>
</tbody>
<tfoot>
<tr><td>fData</td><td>fData</td><td>fData</td></tr>
</tfoot>
</table>
<h4>Below is the custom tag: Flutter tag</h4>
<flutter vertical></flutter>
<h3>List support:</h3>
<ol>
<li>This</li>
<li>
<p>is</p>
</li>
<li>
ordered
<ul>
<li>This is a</li>
<li>nested</li>
<li>unordered list
</li>
</ul>
</li>
</ol>
<h3>Images are also supported:</h3>
<h3>Network png</h3>
<img src="https://res.cloudinary.com/nitishk72/image/upload/v1586796259/nstack_in/courses/flutter/flutter-banner.png">
<h3>Network svg</h3>
<img src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg' />
<h3>Data uri (with base64 support)</h3>
<img alt='Red dot (png)' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' />
<img alt='Green dot (base64 svg)' src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMzAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjE1IiBjeT0iMTAiIHI9IjEwIiBmaWxsPSJncmVlbiIvPgo8L3N2Zz4=' />
<img alt='Green dot (plain svg)' src='data:image/svg+xml,%3C?xml version="1.0" encoding="UTF-8"?%3E%3Csvg viewBox="0 0 30 20" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="15" cy="10" r="10" fill="yellow"/%3E%3C/svg%3E' />
""";
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('GeeksForGeeks'),
centerTitle: true,
),
body: SingleChildScrollView(
child: Html(
data: htmlData,
tagsList: Html.tags..add("flutter"),
style: {
// add style to the tags in HTML code
"table": Style(
backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
),
"tr": Style(
border: Border(bottom: BorderSide(color: Colors.grey)),
),
"th": Style(
padding: EdgeInsets.all(6),
backgroundColor: Colors.grey,
),
"td": Style(
padding: EdgeInsets.all(6),
alignment: Alignment.topLeft,
),
'h5': Style(maxLines: 2, textOverflow: TextOverflow.ellipsis),
},
customRender: {
"table": (context, child) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: (context.tree as TableLayoutElement).toWidget(context),
);
},
// adding customizable tag
"flutter": (RenderContext context, Widget child) {
// giving style to Flutter tag with FlutterLogo() widget
return FlutterLogo(
style: (context.tree.element!.attributes['horizontal'] != null)
? FlutterLogoStyle.horizontal
: FlutterLogoStyle.markOnly,
textColor: context.style.color!,
size: context.style.fontSize!.size! * 5,
);
},
},
customImageRenders: {
// We can give similar features to elements
// from the same domain like for flutter.dev
// We can define any number of networkSourceMatcher
networkSourceMatcher(domains: ["flutter.dev"]):
(context, attributes, element) {
return FlutterLogo(size: 36);
},
networkSourceMatcher(domains: ["mydomain.com"]): networkImageRender(
headers: {"Custom-Header": "some-value"},
altWidget: (alt) => Text(alt ?? ""),
loadingWidget: () => Text("Loading..."),
),
// If relative paths starts with /wiki,
// prefix them with a base url
(attr, _) =>
attr["src"] != null && attr["src"]!.startsWith("/wiki"):
networkImageRender(
mapUrl: (url) => "https://upload.wikimedia.org" + url!),
// If links for images are broken use Custom placeholder
// image
networkSourceMatcher():
networkImageRender(altWidget: (_) => FlutterLogo()),
},
onCssParseError: (css, messages) {
//If error occurs while applying CSS to HTML
print("css that errored: $css");
print("error messages:");
messages.forEach((element) {
print(element);
});
},
),
),
);
}
}
Producción:
