How to create a widget factory for elements side by side

[DFelten]

I would like to use a widget factory to display elements within a div side by side. Unfortunately I don't know how to do that. For the col div class I can create a simple SizedBox with a specific width. But in order to display them side by side, I need a Row or Wrap widget.

In the BuildOps I can only create a widget with one child, but I don't know how to access the children I need for a widget like Wrap or Row.

Is this currently possible @daohoangson?

Html

<div class="row">
    <div class="col-md-4">
        <p class="h2">Test</p>
    </div>
    <div class="col-md-8">
            <p class="h2">Test 2</p>
    </div>
</div>

My current test widget factory

mixin TestWidgetFactory on WidgetFactory {
  @override
  void parse(BuildMetadata meta) {
    if (meta.element.localName == 'div') {
      final List<String> classes = meta.element.classes.toList(growable: false);

      if (classes.contains('row')) {
        meta.register(
          BuildOp(
            onWidgets: (meta, widgets) {
             /// wrap all childs with Wrap or Row widget 
            },
            priority: 7001,
          ),
        );
      }

      if (classes.contains('col')) {
        meta.register(
          BuildOp(
            onWidgets: (meta, widgets) => listOrNull(
              buildColumnPlaceholder(meta, widgets)?.wrapWith(
                (_, child) => SizedBox(
                  width: 100, /// test value
                  child: child,
                ),
              ),
            ),
            priority: 7001,
          ),
        );
      }
    }

    return super.parse(meta);
  }
}

[daohoangson]

I think something like this should work https://try.fwfh.dev/?id=d7a0e963f8ba4b1b3c2ddb0fe15540b4

class _WidgetFactory extends WidgetFactory {
  @override
  void parse(BuildMetadata meta) {
    if (meta.element.classes.contains('row')) {
      meta.register(
        BuildOp(
          onWidgets: (meta, widgets) {
            if (widgets.length < 2) {
              return widgets;
            }
            return [Row(children: widgets.toList(growable: false))];
          },
        ),
      );
    }

    return super.parse(meta);
  }
}

[DFelten]

An question regarding wrap instead of row here. We tried to use wrap, however each widget appears in a new line. With a row they are next to each other, but not with Wrap.

Example (tried with https://try.fwfh.dev ):

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HtmlWidget(
'''
<div class="row">
          <p>
              Test 1
          </p>
          <p>
             Test 2
          </p>
          <p>
             Test 3
          </p>
</div>
''',
        factoryBuilder: () => MyWidgetFactory(),
     );
  }
}

class MyWidgetFactory extends WidgetFactory {
  @override
  void parse(BuildMetadata meta) {
     if (meta.element.classes.contains('row')) {
      meta.register(
        BuildOp(
          onWidgets: (meta, widgets) {
            if (widgets.length < 2) {
              return widgets;
            }

            return [Wrap(children: widgets.toList(growable: false))];
          },
        ),
      );
    }

    return super.parse(meta);
  }
}

[DFelten]

Thank you very much, this is working :) I don't know why I didn't think of it myself.

[DFelten]

@daohoangson I have a follow-up question on the row example. I know that Bootstrap is not currently supported. We are currently trying a Widget Factory to allow Rows and Columns from Bootstrap. This works so far, except when a row has too many columns. With Bootstrap, an element then moves to the next row. Wrap does not work (the behavior is strange), so we try to build different rows.

To do this, we try to split the columns into different rows in a BuildOP. In the example, the last column would have to go into the next row, because the column count is greater than 12. Unfortunately, the widgets from onWidgets do not correspond to the number of elements, since paddings can also be found here. Therefore, we do not know how best to divide this. We are missing the assignment of the elements and the widgets here. We are missing the assignment of the elements and the widgets here. There are more placeholders than elements.

If we had an assignment, we could read the number of columns, and put the placeholders into multiple rows. Does anyone here possibly have an idea?

Example html

<div class="row">
  <div class="col-6 p-2">
    <div>
      <p>Test</p>
    </div>
  </div>
  <div class="col-6 p-2">
    <div>
      <p>Test2</p>
    </div>
  </div>
  <div class="col-6 p-2">
    <p>Test3</p>
  </div>
</div>

[daohoangson]

The widgets passed into onWidgets is not guaranteed to have a 1-1 mapping with HTML element. E.g. some other build op may have added additional widgets or remove existing one. You probably need to keep track of the col div separately and go through them later in the row div. The TABLE build op does something similar.

See sample code here: https://try.fwfh.dev/?id=14b89e9daf2947c5278987d870a6dd78