Displaying HTML content with CSS in Flutter

[Danny Hui]

Hi All,

I would like to display html content with CSS in Flutter.

I tried to convert HTML to Markdown. Then render Markdown via flutter_markdown.

However, I found that the flutter_markdown does not support some markdown outputs.

e.g. table, css/css path

Am I going to a wrong direction of flutter html viewer?

My html content can be displayed in native android and iOS html viewer properly. 

It seems that flutter does not have component which can do the same thing at this moment?

Should I try using native Android and iOS html viewer in my flutter project?

I would like to use the android and iOS native components in my flutter project.

I found that there is a flutter_view plugin which demonstrate using flutter widgets and native components together.

But the components are added to the root activities. 

Should I try to use the native components in my flutter screens under lib by MethodChannel?

Am I going to a right direction for displaying the html content with css in Flutter?

Thanks!

[Karthik Ponnam]

Flutter has no support for webview

[Ryan Gonzalez]

You can display HTML and CSS using a WebView...in a separate activity from your Flutter UI. There is *no* way currently to actually have a WebView widget inside your Flutter views.

What exactly are you trying to accomplish?

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Danny Hui]

Hi Karthik and Ryan,

Thanks for replying.

I would like to show this html content as part of my flutter screen(e.g. body of flutter Scaffold) : 

<style>

table, th, td {

    border: 11px solid black;

}

</style>

<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

  </tr>

  <tr>

    <td>Peter</td>

    <td>Griffin</td>

  </tr>

  <tr>

    <td>Lois</td>

    <td>Griffin</td>

  </tr>

</table>

Best regards!

[Ryan Gonzalez]

Try just using the table widget:

Table(
  border: TableBorder.all(width: 11.0),
  children: [
    TableRow(
      children: [
        const Text('Firstname'),
        const Text('Lastname'),
      ]
    ),
    TableRow(
      children: [
        const Text('Peter'),
        const Text('Griffin'),
      ]
    )
  ]
)

[Danny Hui]

Hi Ryan,

Many thanks for your help and example code. 

It works fine to show the table content in flutter. 

However, my content is dynamic. It is from server side and is not hard coded in the mobile app. 

Also, it can be more complicated that we may not be able to represent it in flutter widgets.

I am looking for the flutter html viewer(like the native one in Android and iOS). 

If there is no such html viewer in flutter as mentioned by Karthik, I think opening a web view is one of the solution..

Best Regards!

[Ryan Gonzalez]

Oof... Yeah, you'll probably have to use a webview then.

Out of curiosity, could you share some more details about the server? E.g. can it return pretty much any HTML/CSS, or only certain elements? Is there an option on the API to return some sort of unrendered content?