ponnamkarthik / flutterhtmlview

Flutter Plugin to render html as a Widget

PonnamKarthik

Flutter dev

flutterhtmlview's Issues

Installing Plugin Fails

I get this error when adding to pubspec.yaml in Flutter:

Running "flutter packages get" in UnifyVideo...
Package flutter_cache_manager has no versions that match >=0.1.0 <0.2.0 derived from:

• cached_network_image 0.4.0 depends on version ^0.1.0
  pub get failed (1)
  exit code 1

Flutter Doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.2.8, on Mac OS X 10.13.3 17D102, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.3)
[✓] Android Studio (version 3.0)
[✓] VS Code (version 1.22.2)
[✓] Connected devices (3 available)

• No issues found!

List of supported tags ?

Maybe make a little markdown doc in the repo to say what tags are supported and why ?

i was thinking that its impossible to suppot all tags.
then i was thinking that maybe its smart to support the MDC tags ?

in the readme here ( https://github.com/material-components/material-components-web-components ), there is a link to this :

https://gist.githubusercontent.com/sorvell/2ec11ccde449815bc97edc1026be27a9/raw/8bab65dd5d15f657ae69493851690c5564367d13/index.html

As you can see they have fully qualified custom tags because its web components.

---

Now thats not everyone cup of tea and i can sympathise as web components brings along other dependencies.

in the core MDC repo here ( https://github.com/material-components/material-components-web), you can see in the demo folder the way the core MDC components are described.
For example Chips !
https://github.com/material-components/material-components-web/blob/master/demos/chips.html

Its using standard html tags with a special class to indicate what it should be.

---

Anyway maybe this is a smart way to align things ?
I bring this up because i like the idea id a data driven way to describe the layout and to be able to reuse it for web, flutter and print to PDF.

Picture does not show

flutter beta channel

code

'''<h1>test</h1><br /><div>test2</div>
  <p>
    <img src="network.jpg" alt="test img">
    test
  </p>
  '''

Images not rendering

Within IOS Simulator development I have used the code and even the text code with image but while the text renders, the image fails to render.

Cannot render an iframe

Hi am trying to render the following url:

String html = '<iframe id="embedded-human" frameBorder="0" width="600" height="450" src="https://human.biodigital.com/widget/?m=production/maleAdult/atrial_fibrillation_heart_conduction_system_tour.json&initial.hand-hint=true&ui-info=true&ui-tour=[object object]&ui-zoom=true&ui-share=false&uaid=2nran"></iframe>';

but the screen appears blank. I tried with simple heading and images and worked fine.** The problem comes when trying to render iframes.**

flutter_html_view ^0.5.8, version solving failed.

no versions of flutter_html_view match >0.5.8 <0.6.0 and flutter_html_view 0.5.8 depends on cached_network_image ^0.4.2, flutter_html_view ^0.5.8 requires cached_network_image ^0.4.2.
And because no versions of cached_network_image match >0.4.2 <0.5.0 and cached_network_image 0.4.2 depends on flutter_cache_manager ^0.1.2, flutter_html_view ^0.5.8 requires flutter_cache_manager ^0.1.2.
Because flutter_cache_manager 0.1.2 depends on http ^0.11.3+14 and no versions of flutter_cache_manager match >0.1.2 <0.2.0, flutter_cache_manager ^0.1.2 requires http ^0.11.3+14.
Thus, flutter_html_view ^0.5.8 requires http ^0.11.3+14.
And because every version of flutter_test from sdk depends on http 0.12.0, flutter_html_view ^0.5.8 is incompatible with flutter_test from sdk.

Responding to clicks

If there a way to respond to clicks on buttons ? For example you feed in a html button tag and it will render a flutter button and fires the event in dart and you can then do whatever you want like load another view or navigate to a different route.

event sink to allow reacting to click event and re-rendering the view with new data, etc

At the moment, when links are clicked, a browser window is opened.

It would be cool if when you click links, the event is sent to a handler and you can merge data and re-render the HTML.

How do I change the text color without HTML in HtmlText

Events within the HTML

This is really useful to me as it allows updating the app without recompiling.

I am curious if you have a plan to integrate events modelled in the HTML ?
I am thinking about extending it such that all events go to a central event sink and then react with a new html view. It's a nieve approach.

no video in IOS simulator

In the IOS Simulator, It plays the audio but not the video is this normal ?
In android si it works fine.

So, I tried overriding in the pubspec but no difference.

dependency_overrides:
  video_player: ^0.6.4

Upgrade video_player dependency

The dependency on video_player needs to be upgraded (0.6.4 is the current version as of now).

At the moment, the low dependency value is making this library incompatible with another video library that I am using.

IOS crush when open a link

Because the _launchOtherURL() method crush in IOS, I've changed the recognizer() method to use _launchOtherURL() and start to open links successfully.
I don't know if Flutter_Custom_Tabs has a bug with IOS.

The new recognizer() method:

TapGestureRecognizer recognizer(String url) {
    return new TapGestureRecognizer()
      ..onTap = () {
        _launchOtherURL(url);
      };
  }

!e.outerHtml.contains("<img") || !e.outerHtml.contains("<video") always return true

https://github.com/PonnamKarthik/FlutterHtmlView/blob/43b02a91e3e9db4a2790caaab82af3192798e64b/lib/html_parser.dart#L69

Rewrite parser

I want to use this to parse MDC based html.
This html is make of custom elements.

But looking at the parser it's really quite messy.

I hate to be negative..
It might be better to write it using the visitor pattern or other.

Again I am grateful for this plugin but I really want to make the parser more agnostic to the html it gets to make it easier to use with different html.

This will make it much less fragile and flexible to people's divergent needs.

What you you think ?

Support img inside other tags

This works:

<img alt="Test Image" src="https://source.unsplash.com/random/300x200">

This don't:

<figure>
        <img alt="Test Image" src="https://source.unsplash.com/random/300x200">
</figure>

<p>
        <img alt="Test Image" src="https://source.unsplash.com/random/300x200">
</p>

flutter_html_view >=0.5.10 requires url_launcher ^3.0.0

I use the latest version of url_launcher version ^4.0.1

why keep dependency video_player comment?

https://github.com/PonnamKarthik/FlutterHtmlView/blob/da6f11dd2b92afe4ad1a35b3b01e2418740795f0/pubspec.yaml#L14

Can just ignore the unsupported tags, not treated as an error?

html

body = "<p><a class=\"tumblr_blog\" href=\"https://imthedoctorbasicallyfun.tumblr.com/post/163220344226/my-brain-eat-me-okay-what-should-we-make-my\" target=\"_blank\">imthedoctorbasicallyfun</a>:</p><blockquote>\n<p class=\"npf_chat\" data-npf='{\"subtype\":\"chat\"}'><b>My Brain:</b> Eat</p>\n<p class=\"npf_chat\" data-npf='{\"subtype\":\"chat\"}'><b>Me:</b> Okay, what should we make?</p>\n<p class=\"npf_chat\" data-npf='{\"subtype\":\"chat\"}'><b>My Brain:</b> No make!!! Only eat.</p>\n</blockquote>";

error

Paragraphs with strongs - Causes double ups

In this case:
<p><strong>Dental Assistants:</strong></p>

It creates a double up of output in the rendered results.

Strong in general seems to have issues when it is right next to other html markup elements. As with my other reported issue - causes the link to break in a few ways as well.

Support onTap for images

Hey it would be really nice if you could implement a feature to specifiy an onTap method for images.

Current 0.5.8 html image not show

Current 0.5.8 html img not show;
but 0.3.1 img show OK.

[QUESTION] Parse Error

Could you please tell me why some HTML like this would throw a parse error?
(Skip the relative img's src, since I'm fixing that in the code)

<p><img style="width: 100%;" title="Marcha Federal Universitaria - NA" src="/media/image/2018/08/30/397653.jpg" alt="Marcha Federal Universitaria - NA" ></p>
<p><strong>(Foto: NA)</strong></p>
<p>A pesar de la intensa lluvia, comenz&oacute; esta tarde desde el Congreso Nacional la marcha de gremios de docentes universitarios y federaciones estudiantiles hacia la Plaza de Mayo para denunciar la crisis salarial y presupuestaria en universidades p&uacute;blicas.</p>
<p><img style="width: 100%;" title="Marcha Federal Universitaria - NA" src="/media/image/2018/08/30/397652.jpg" alt="Marcha Federal Universitaria - NA" /></p>
<p><strong>(Foto: NA)</strong></p>
<p>CONADU, CONADU Hist&oacute;rica, FEDUN, UDA, FAGDUT y CTERA son los gremios que impulsan la movilizaci&oacute;n junto a las federaciones estudiantiles, pero tambi&eacute;n se sumar&aacute;n agrupaciones pol&iacute;ticas, sociales y de otras ramas sindicales.</p>
<p>&nbsp;</p>
<p>"El desfinanciamiento lleva dos a&ntilde;os, es muy grave", lament&oacute; el secretario general de Conadu, Carlos de Feo.</p>
<p>&nbsp;</p>
<p><video id="embed_video_397638" class="video-js vjs-default-skin" controls="controls" data-setup="{}"><source src="/media/video/2018/08/30/397638.mp4" type="video/mp4" />Your browser does not support the video element.</video>&nbsp;</p>
<p><br />Las primeras movilizaciones comenzaron alrededor de las 8 de la ma&ntilde;ana en el Obelisco, donde estudiantes cortaron una de las manos de 9 de Julio en apoyo al reclamo de los profesores.</p>
<p>&nbsp;</p>
<p><br />Durante la jornada, se sumaron cortes y movilizaciones en el Congreso que llegaron luego hasta Plaza de Mayo. A las 10 hubo una concentraci&oacute;n de ATE en Tucum&aacute;n y San Mart&iacute;n y a las 15 se concentraron en Bartolom&eacute; Mitre y Callao los estudiantes de la Universidad Nacional de las Artes. A la misma hora, en Luis S&aacute;enz Pe&ntilde;a y Avenida de Mayo convoca Conadu. A las 16, docentes y empleados de la UBA se concentraron en Plaza Houssay y Suteba, Ctera, Cicop, CTA, CGT, centros de estudiantes y otras organizaciones lo hacen en la zona del Congreso Nacional.</p>
<p>&nbsp;</p>
<p><video id="embed_video_397635" class="video-js vjs-default-skin" controls="controls" data-setup="{}"><source src="/media/video/2018/08/30/397635.mp4" type="video/mp4" />Your browser does not support the video element.</video></p>
<p>&nbsp;</p>
<p><br />Hay tomas de facultades no s&oacute;lo en la UBA sino tambi&eacute;n en la Universidad Nacional de Cuyo, la Universidad Nacional de Comahue, la Universidad Nacional de Rosario, la Universidad Nacional de C&oacute;rdoba y la Universidad Nacional de La Pampa.</p>
<p>&nbsp;</p>
<p><br />Otro cap&iacute;tulo de tensi&oacute;n se librar&aacute; en torno a la discusi&oacute;n - que comenzar&aacute; en septiembre- del Presupuesto 2019 y las partidas que se destinen a &aacute;reas de universidades y Ciencia. Los estudiantes que toman las facultades reclaman una mejor paritaria para los docentes as&iacute; como mayor presupuesto para las universidades.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Not able to change default font size

Is there a easy way to change default font size?

Default font size looks too small on high resolution devices such as Pixel 2 XL.

Video -> Source tag

Could support for "source" tag inside video tag be added? I'm using this html layout and the plugin is not parsing it well since it looks for "src" attribute in the video tag only.

example:
https://www.w3schools.com/html/html5_video.asp

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Fatal: unable to connect to github.com

All versions return a Git error, unable to connect to github.com git://github.com/jogboms/flutter_cache_manager
using dart 2.1.0-dev.1.0

Cannot be imported on flutter 0.7.2 version

Because flutter_html_view >=0.5.5 depends on cached_network_image ^0.4.1 which depends on flutter_cache_manager ^0.1.1, flutter_html_view >=0.5.5 requires flutter_cache_manager ^0.1.1.
And because flutter_cache_manager >=0.1.0-rc.1 depends on uuid ^0.5.3, flutter_html_view >=0.5.5 requires uuid ^0.5.3.
So, because uuid >=0.0.7 <1.0.3 requires SDK version <2.0.0 and flutter_test03 depends on flutter_html_view ^0.5.5, version solving failed.
pub get failed (1)

Can't use img tag and video tag

Version Fail for 0.5.8

Error -

Because every version of flutter_test from sdk depends on http 0.12.0 and flutter_cache_manager ^0.1.0-rc.1 depends on http ^0.11.3+14, flutter_test from sdk is incompatible with flutter_cache_manager ^0.1.0-rc.1. And because flutter_html_view >=0.5.8 depends on cached_network_image ^0.4.2 which depends on flutter_cache_manager ^0.1.2, flutter_test from sdk is incompatible with flutter_html_view >=0.5.8. So, because xx_project depends on both flutter_html_view ^0.5.8 and flutter_test any from sdk, version solving failed.

Flutter version -

Flutter 0.10.1-pre.44 • channel master • https://github.com/flutter/flutter.git Framework • revision bf92d7f286 (3 days ago) • 2018-10-15 13:46:25 -0700 Engine • revision 50c2e69daf Tools • Dart 2.1.0-dev.7.0.flutter-b99bcfd309

Duplicate link when using <a></a> tag nested inside <p></p>

Hello,
When you have for exemple a HTML string such as '<p>Hello world, check the Google page <a href="https://google.com">https://google.com</a></p>' , the link https://google.com is displayed twice.

To remove, I need to change as : '<p>Hello world, check the Google page</p> <a href="https://google.com">https://google.com</a>'

We can't add a <a></a> tag inside a <p></p> tag.

HtmlView error in rendering <iframe>, <blockquote>

HtmlView showing error when it encounters <iframe> and <blockquote>

For the <iframe> it contains YouTube Video HTML embed code while the <blockquote> is Twitter's tweet and Instagram post HTML embed code in <blockquote>.

Styling ala flutter_markdown?

If the two packages could get together and make a baby, it would be so pretty

Both &nbsp; and literal char code 160 (\u00A0) are shown as "&nbsp;"

From @gregko on May 12, 2018 13:3

URL: https://pub.dartlang.org/packages/flutter_html_view#-analysis-tab-

If the data string to show in HtmlView control contains "Some&nbsp;text" or "Some_test", where underscore _ represents Unicode code point 160 '\00A0', the HtmlView shows literally:

Some text

To avoid the issue I have to use code like:

s = s.replaceAll('\u00A0', ' ');
or
s = s.replaceAll(' ', ' ');

Copied from original issue: dart-lang/pub-dev#1287

Overflow not available

Would it be possible to add overflow to the flutter_html_view HtmlView contractor and apply it to the RichText?

Readme.md typo

new HtmlText(data: html);
should be
new HtmlView(data: html)

have issue with plugin after flutter on dev mode

NoSuchMethodError: The method 'containsKey' was called on null.
Receiver: null
Tried calling: containsKey("http://udchi.com/wp-content/uploads/2017/04/1241241241324-225x300.jpeg"),

i am change flutter channel to dev mode, and flutter been upgrade to 0.5.8

and htmlview not working anymore,

it's show contain key of my image issue, but before i upgrade the flutter, it all working great

Span's and spans with inline styles

Entire paragraphs wrapped in a span get removed from the content. Just a note but I think there is not much you can do about it, that content should never really be wrapped in a span like that anyway.

But we have noticed that content with spans with inline style cause a break in the output and can cause the entire output to be empty.

Links with strong

We have noticed that if the following HTML is present:

http://linkhere.com

The item comes out strong but the link does not work. Removing the strong in the source HTML allows the link to function.

Launch links

This is great! Are you planning on making links clickable?

VideoPlayerPlugin.java uses or overrides a deprecated API.

Note: /Users/***/development/flutter/.pub-cache/hosted/pub.dartlang.org/video_player-0.6.5/android/src/main/java/io/flutter/plugins/videoplayer/VideoPlayerPlugin.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: MainActivity.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
D8: Cannot fit requested classes in a single dex file. Try supplying a main-dex list.

methods: 66485 > 65536

Html5 attribute parsing failed

Html5 attribute parsing failed

Properties that support starting with data can be implemented without support？

Because flutter_html_view >=0.4.0 depends on flutter_custom_tabs

The title error is occurring on builds after flutter on the dev channel was upgraded to 0.6.0
Flutter 0.6.0
Dart 2.1.0-dev.0.0

Package get error

Hello! When attempting to get the plugin:

dependencies: flutter_html_view: "^0.3.1"

I get this error: "Package flutter_html_view has no versions that match >=0.3.1 <0.4.0 derived from:

• html_demo depends on version ^0.3.1"

Is it because I am using the newest beta of flutter? Thank you

Could you please add a license to this repo, since the LICENSE file is nearly empty?

https://github.com/PonnamKarthik/FlutterHtmlView/blob/master/LICENSE

Android crash on start with Flutter 0.7.3

Upgraded flutter to 0.7.3 and the android app crashes immediately on startup. Logcat shows an error about MainActivity not found.

Removing flutter_html_view fixes the crash.

Styling

What is the best way to style the html? Internal style sheet?

remove print(e.localName)

Not a bug or issue but:
could you remove the print call in the HtmlParser_parseChildren method?

class HtmlParser {
  HtmlParser();

  _parseChildren( dom.Element e, widgetList) {
    print(e.localName); <<
    if (e.localName == "img" && e.attributes.containsKey('src')) {
      var src = e.attributes['sr...

thanks :)

HTML5 of supported tags ?

How To Use needs updating

The How To Use needs updating both here and on dartlang packages

The import statement
import 'package:flutter_html_textview/flutter_html_textview.dart';
should be
import 'package:flutter_html_view/flutter_html_text.dart';
and
new HtmlTextView(data: html);
should be
new HtmlText(data: html);

change TextAlign

how to change textAlign