customWidgetBuilder for putting ElevatedButtons inside table data item <TD> cannot stay same single row

[bksubhuti]

Issue:

CustomWidgetBuilder when used in table data is putting multiple widgets vertically when it is expected to be horizontally (there is room without need to wrap around).

HTML

Here is some code.. we normally add an href and then swap it out for a widget.. Either an Inkwell to launch to a website, or in our new case, a button that will launch a dlg with some data.

here is the table in html with the HREF before doing the customwidget

Short version of interest:

<tr>
        <td>
          <b>Extras</b>
        </td>
        <td>
          <a href="dpd://inflect:59451">Inflect</a>
          <a href="dpd://root-family:59451">Root Family</a>
        </td>
      </tr>

Long complete version :

<p>
<div>
  <details>
    <summary>
      <b>samaya 1.1</b>: masc. <b>time; occasion</b>; lit. going together [saṃ + √i + *a] <span class="gray">✓</span>
    </summary>
    <table>
      <tr>
        <th valign="top">Pāḷi</th>
        <td>samayo</td>
      </tr>
      <tr>
        <th valign="top">IPA</th>
        <td>/sɐmɐjə/</td>
      </tr>
      <tr>
        <th valign="top">Grammar</th>
        <td>masc, from sameti</td>
      </tr>
      <tr>
        <th valign="top">Root</th>
        <td>√i 1 a (come, go)</td>
      </tr>
      <tr>
        <th valign="top">Construction</th>
        <td>saṃ + √i > ay + *a</td>
      </tr>
      <tr>
        <th valign="top">Derivative</th>
        <td>kita (*a)</td>
      </tr>
      <tr>
        <th valign="top">Phonetic</th>
        <td>ṃ > m <br>i > ay </td>
      </tr>
      <tr>
        <th valign="top">Antonym</th>
        <td>asamaya</td>
      </tr>
      <tr>
        <th valign="top">Synonym</th>
        <td>kāla</td>
      </tr>
      <tr>
        <th valign="top">Sanskrit</th>
        <td>samaya [sami]</td>
      </tr>
      <tr>
        <th valign="top">Sanskrit Root</th>
        <td>√i 1, 2 (go)</td>
      </tr>
      <tr>
        <td>
          <b>Extras</b>
        </td>
        <td>
          <a href="dpd://inflect:59451">Inflect</a>
          <a href="dpd://root-family:59451">Root Family</a>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <a href="https://docs.google.com/forms/d/e/1FAIpQLSf9boBe7k5tCwq7LdWgBHHGIPVc4ROO5yjVDo1X5LDAxkmGWQ/viewform?usp=pp_url&entry.438735500=samaya%201.1&entry.1433863141=TPR%202024-07-20" target="_blank">Submit a correction</a>
        </td>
      </tr>
    </table>
  </details>
</div>
</p>

Flutter Code for custom widget builder.

                    customWidgetBuilder: (element) {
                      final href = element.attributes['href'];
                      if (href != null) {
                        // Determine the link text
                        String linkText = href.contains("wikipedia")
                                ? "Wikipedia"
                                : "Submit a correction";

                        if (href.startsWith("dpd://")) {
                          // Return a small button for DPD extra links

                          Uri parsedUri = Uri.parse(href);
                          String extra = parsedUri.host;
                          int id = parsedUri.port;

                          return SizedBox(
                            height:
                            24, // Adjust height to make the button smaller
                            child: ElevatedButton(
                              style: TextButton.styleFrom(
                                padding:
                                const EdgeInsets.symmetric(horizontal: 8.0),
                                minimumSize: const Size(0,
                                    0), // Removes default minimum size constraints
                                tapTargetSize: MaterialTapTargetSize
                                    .shrinkWrap, // Reduces button padding
                              ),
                              onPressed: () {
                                debugPrint('DPD "$extra" extra operation for: $id');
                                showDpdExtra(context, extra, id);

                              },
                              child: Text(
                                '${element.text}',
                                style: const TextStyle(
                                    fontSize: 10), // Set font size to 10pt
                              ),
                            ),
                          );
                        } else {
                          // Use InkWell with 10pt font for other links
                          return InkWell(
                            onTap: () {
                              launchUrl(Uri.parse(href),
                                  mode: LaunchMode.externalApplication);
                              debugPrint('Will launch $href. --> $textKey');
                            },
                            child: Text(
                              linkText,
                              style: const TextStyle(
                                decoration: TextDecoration.underline,
                                color: Colors.blue,
                                fontSize: 10, // Set font size to 10pt
                              ),
                            ),
                          );
                        }
                      }
                      return null;
                    },

If we put inkwell, it also stacks them vertically.

Here is what the buttons look like after we display them.

What we expect?

We expect the buttons or any other multiple widgets to be on the same row horizontally if there is enough room in the table row. One widget inside the works fine.

[bksubhuti]

As a workaround, I made a single widget for the area we want to write to as flutter Row Then I added two test buttons. This will work for my case. I would imagine that the Html widget should work like this without me adding a row manually

[bksubhuti]

The other way is returning InlineCustomWidget which the real programmer on our team (not me) figured out.

[daohoangson]

So it works now?

[bksubhuti]

Yes. I guess this is the proper way to do this although it was not intuitive. Shall we close this?

[daohoangson]

The InlineCustomWidget wrapper is created specifically for this use case so I would say it's the easiest way to achieve your desired effect.

[bksubhuti]

yes.. it is fine.. closed