How to embed Microsoft word file content to a flutter application without rewriting it using Rich text

Question

I'm developing a flutter application for both Android and IOS, I want to embed the content of a Microsoft word file .docx or .doc provided by the client to be viewed in the about screen of the application.

The file is long and I can't rewrite it using Rich text widget. the file is simple and doesn't have images.

I did some research and I found some solution talking about converting the file to pdf and embed a pdf view. I didn't like it also because the content won't be shown as a part of the application and the page separators will still be there.

Solution

After long research, I found flutter_widget_from_html package which is an amazing package that converts your simple HTML to a flutter widget and gives you the choice to use it as a webview or just for rendering static Html.

we need now to add this package to pubspec.yaml, please always set the latest version

dependencies:
  flutter_widget_from_html: ^0.3.2+1

The challenge now is to convert the word document to simple HTML without js or external css files

I managed to find that free site https://wordhtml.com/ that allows you to paste your word file content to its editor and it will convert it directly to HTML

The final step is to copy the content from the HTML tab and insert it to a widget

const kHtml = """
<h1>Heading</h1>
<p>A paragraph with <strong>strong</strong> <em>emphasized</em> text.</p>
<ol>
  <li>List item number one</li>
  <li>
    Two
    <ul>
      <li>2.1 (nested)</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>Three</li>
</ol>
<p>Thank you</p>
""";

class HelloWorldScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('HelloWorldScreen'),
        ),
        body: HtmlWidget(
          kHtml,
          webView: false,
        ),
      );
}

In my case, I want the content to scrollable so I surrounded the HtmlWidget with a listview

class HelloWorldScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('HelloWorldScreen'),
        ),
        body: ListView(
          shrinkWrap: true,
          children: <Widget>[
            HtmlWidget(
                kHtml,
              ),
          ],
        )
      );
}