flutter_widget_from_html icon indicating copy to clipboard operation
flutter_widget_from_html copied to clipboard

How to remove an element in onParser of WidgetFactory?

Open MiniSuperDev opened this issue 1 year ago • 1 comments

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

MiniSuperDev avatar Aug 15 '24 02:08 MiniSuperDev

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

daohoangson avatar Sep 29 '24 13:09 daohoangson