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.8k stars 874 forks source link

[BUG] Simple non-wrapped children are not rendered #1252

Closed michalsrutek closed 1 year ago

michalsrutek commented 1 year ago

Describe the bug:

When using customRenders, simple non-wrapped text does not get rendered. It has to be wrapped in p, span or similar.

HTML to reproduce the issue:

<custom>Hello <span>there</span> <test></test> <p>new</p></custom>

Html widget configuration:

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

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

  final _testTag = 'test';
  final _customWrapperTag = 'custom';

  CustomRender _testRender() {
    return CustomRender.widget(widget: (_, __) {
      return const Icon(Icons.abc);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HTML example'),
        ),
        body: Html(
          data:
              '<custom>Hello <span>there</span> <test></test> <p>new</p></custom>',
          customRenders: {
            tagMatcher(_testTag): _testRender(),
            tagMatcher(_customWrapperTag): fallbackRender(),
          },
          tagsList: Html.tags
            ..addAll([
              _testTag,
              _customWrapperTag,
            ]),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

Expected behavior:

I would expect the word Hello to be rendered. But it is not - as it does not appear in the buildChildren function. If I comment out the following line, it works as expected.

tagMatcher(_customWrapperTag): fallbackRender(),

Is this the correct behavior - am I just missing something?

Screenshots:

Expected Actual
Simulator Screen Shot - iPhone 14 Pro - 2023-05-08 at 12 13 19 Simulator Screen Shot - iPhone 14 Pro - 2023-05-08 at 12 13 27

Device details and Flutter/Dart/flutter_html versions:

Sub6Resources commented 1 year ago

Once #1273 is merged, this is the proper way to get your expected behavior (in 3.0.0-beta.1 the API made accessing the children difficult):

    return Html(
      data: "<custom>Hello <span>there</span> <test></test> <p>new</p></custom>",
      extensions: [
        TagExtension(tagsToExtend: {"test"}, child: const Icon(Icons.abc)),
        TagExtension.inline(
          tagsToExtend: {"custom"},
          builder: (extContext) {
            return TextSpan(children: extContext.inlineSpanChildren!);
          },
        ),
      ],
    );

Still working on some better documentation!