Possible Toast, Snackbar or Popover ability?

[jasonjflaherty]

Hello All, I've been checking out this great package in a recent build. I was asked about the ability to click on an acronym and see the full description. Similar to a popover with javascript (ie... example in bs4). I tried a Custom Rendering and can get a Toast or other type of widget to show like so:

Html(
              data:
                  """<h3>Display <abbr>bird element</abbr> and flutter element <bird></bird></h3>""",
              customRender: {
                "bird": (RenderContext context, Widget child) {
                  return TextSpan(text: "🐦");
                },
                "abbr": (context, child) {
                  return GestureDetector(
                    onTap: () {
                      Fluttertoast.showToast(
                          msg: "This is Center Short Toast",
                          toastLength: Toast.LENGTH_SHORT,
                          gravity: ToastGravity.BOTTOM,
                          timeInSecForIosWeb: 1,
                          backgroundColor: Colors.red,
                          textColor: Colors.white,
                          fontSize: 16.0);
                    },
                    child: Text("THIS"),
                  );
                },
              },
              tagsList: Html.tags..addAll(["bird", "abbr"]),
            ),

However, I have struck out trying to NOT replace the text.

TextStyle(color: Colors.green)

will not work as child. Text() will, but that will replace the text as well. Is there a way to get the text surrounded in the Tag? Something like Text(this.text);

Thanks!

[jasonjflaherty]

After putting up this q/a, I was able to hack something together here. I think this works pretty well and can be used for other widgets I am sure. I'm using the fluttertoast package in my example.

child: Html(
                data:
                    """<p>Display <abbr id="describes a bird">bird element</abbr> and flutter element</p>""",
                style: {
                  "p": Style(
                      fontStyle: FontStyle.normal, fontSize: FontSize.larger)
                },
                customRender: {
                  "abbr": (RenderContext context, Widget child) {
                    return GestureDetector(
                      onTap: () {
                        Fluttertoast.showToast(
                            msg: context.tree.element?.id ?? '',
                            toastLength: Toast.LENGTH_SHORT,
                            gravity: ToastGravity.BOTTOM,
                            timeInSecForIosWeb: 1,
                            backgroundColor: Colors.red,
                            textColor: Colors.white,
                            fontSize: 16.0);
                      },
                      child: Text(
                        context.tree.element?.text ?? '',
                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.black,
                          decoration: TextDecoration.underline,
                        ),
                      ),
                    );
                  },
                },
              ),

This example just uses the tag abbr which is part of the package, but you could utilize something custom. One thing to note, I am using the id="" to store the full description, however, it a standard html site, it would be title="" holding the full description.

Hope this helps someone looking for this same thing.