Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Possible Toast, Snackbar or Popover ability?#791

Discussion options

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!

You must be logged in to vote

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 thefluttertoast package in my example.

child: Html(                data:                    """<p>Display <abbr>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: () {                        Flu…

Replies: 1 comment

Comment options

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 thefluttertoast package in my example.

child: Html(                data:                    """<p>Display <abbr>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 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.

You must be logged in to vote
0 replies
Answer selected byjasonjflaherty
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
1 participant
@jasonjflaherty
[8]ページ先頭
©2009-2025 Movatter.jp