Flutter for Linux: display HTML asset file in the app

user_13766744 0
Viewed 130

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.

dart flutter linux html
1 Answers

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"
user_137667440
Related