Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.79k stars 860 forks source link

[BUG] html widget refresh after resize #1181

Open poringe opened 1 year ago

poringe commented 1 year ago

Hi,

After load all widget. if resizing for the first time(first time only) html widget will refresh. how can i prevent this?

  1. load all widget image

  2. resizing browser for the first time. html widget refresh (youtube) image

Code

                                 Html(
                                  shrinkWrap: true,
                                  data: HotNewsData.findById(topicId).desc,
                                  style: {
                                    '#': Style(
                                      padding: const EdgeInsets.fromLTRB(
                                          4, 4, 4, 4),
                                      fontSize: FontSize(18),
                                    ),
                                  },
                                  customRenders: {
                                    iframeMatcher(): youtubeRender()
                                  },
                                ),

flutter_html: ^3.0.0-alpha.6 flutter_html_iframe: ^3.0.0-alpha.3

sorry for my english

Sub6Resources commented 1 year ago

I'm not sure why that's happening. I'll have to take a closer look. Can you provide a short reproducible sample of the html you are using?

poringe commented 1 year ago

i think something wrong with div tag if put iframe in div like this

<div><iframe id="3" width="560" height="315" src="https://www.youtube.com/embed/qtPUx6kzW0U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

html widget will refresh when i resizing for the first time. if i remove div tag no more refresh

youtubeRender.dart

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:html' as html;
import 'dart:ui' as ui;

CustomRender youtubeRender({NavigationDelegate? navigationDelegate}) {
  return CustomRender.widget(widget: (context, buildChildren) {
    return Builder(builder: (buildContext) {
      ui.platformViewRegistry.registerViewFactory(
          context.tree.attributes['id']!,
          (int id) => html.IFrameElement()
            ..width = "100%"
            ..height = "100%"
            ..src = context.tree.attributes['src']
            ..style.border = 'none');
      return Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: ClipRRect(
          borderRadius: const BorderRadius.all(Radius.circular(10)),
          child: SizedBox(
            height: 350,
            child: HtmlElementView(
              viewType: context.tree.attributes['id']!,
            ),
          ),
        ),
      );
    });
  });
}