Flutter for Linux: display HTML asset file in the app - html

Question

Is there currently in flutter any way to display/load an HTML file from the assets folder in an application for linux? I have been researching for a while but to no avail. I have no code example, since all the approaches I have found are targeted for android and iOS. If anyone knows of an accessible way or a workaround, thank you in advance.

Answer 1

For Linux (desktop) looks like the flutter_html package works too (even if it is still not indicated at pub.dev). So what I did it's the following: I loaded the file from the rootBundle, that is, from my assets folder and parsed it to a Document object. After that, I just got the outerHtml String and passed it as a parameter to an Html Widget from the flutter_html package, as mentioned.
So if you want to give this a try, make sure you have your assets folder correctly set and store the HTML file in it. I took an example HTML file from: https://filesamples.com/formats/html.
After that, make sure you set your dependencies at pubspec.yaml (choose the versions that fit you best):
dependencies:
flutter:
sdk: flutter
html: any # Add this
flutter_html: ^1.3.0 # Add this
Still at pubspec.yaml: set the reference to your assets folder.
flutter:
uses-material-design: true
assets: # Add this
- assets/ # Add this
Then place this code in your main.dart and run it:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart' as dom;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Load on Linux for desktop'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
getHtml();
super.initState();
}
Future<dom.Document> getHtml() async {
return parse(await rootBundle.loadString('assets/sample1.html'));
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: FutureBuilder<dom.Document>(
future: getHtml(),
builder:
(BuildContext context, AsyncSnapshot<dom.Document> snapshot) {
if (snapshot.hasData) {
return Html(data: snapshot.data.outerHtml);
} else {
return Center(
child: Text("Loading"),
);
}
}),
);
}
}
If needed, these are my OS details.
NAME="Ubuntu" VERSION="18.04.5 LTS (Bionic Beaver)" ID=ubuntu
ID_LIKE=debian PRETTY_NAME="Ubuntu 18.04.5 LTS" VERSION_ID="18.04"