daohoangson / flutter_widget_from_html

Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.
https://pub.dev/packages/flutter_widget_from_html
MIT License
635 stars 235 forks source link

How to remove an element in onParser of WidgetFactory? #1316

Open MiniSuperDev opened 1 month ago

MiniSuperDev commented 1 month ago

Hi, i have the following code that remove the element and in the innerHtml we can see that is removed, but it is rendered as you case see, how to remove to not render it?

My use case is to remove some elements that contain some classes.

Thanks

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: HtmlWidget(
            '<div><p class="remove">Remove</p><p>Good</p></div>',
            factoryBuilder: () => MyWidgetFactory(),
          ),
        ),
      ),
    );
  }
}

class MyWidgetFactory extends WidgetFactory {
  final myOp = BuildOp(
    onParsed: (tree) {
      tree.element.querySelector('.remove')?.remove();      

      print(tree.element.innerHtml);  // removed: now is <p>Good</p>

      return tree;
    },
  );

  @override
  void parse(BuildTree tree) {
    if(tree.element.localName == "div"){
    tree.register(myOp);  
      return;
    }

    return super.parse(tree);

  }
}

It render: image Instead of only Good

daohoangson commented 2 weeks ago

It's probably easiest to target those classes and set display: none.