表单字段与Flutter中的解释弹出窗口

huangapple go评论70阅读模式
英文:

Form field with an explanatory pop up in flutter

问题

I have a form in which I want to create a button like feature to explain the content of the form field. Something like this:

表单字段与Flutter中的解释弹出窗口

The question mark is the button itself, and when the user taps it, it shows a dialog or pop up (doesn't need to be like in the picture, but similar) which contains some text.

I was investigating about suffix property, that allows me to do something like that but not in the label text, as label text needs a string, not a widget, and its mandatory for this project to do this in the label text.

Here is the current code of that form field:

DropdownSearch<
Map<String, dynamic>>(
dropdownDecoratorProps:
const DropDownDecoratorProps(
dropdownSearchDecoration:
InputDecoration(
floatingLabelBehavior:
FloatingLabelBehavior.auto,
labelText: "Crop",
disabledBorder: InputBorder.none,
hintText: 'Select crop',
),
),

英文:

I have a form in which I want to create a button like feature to explain the content of the form field. Something like this:

表单字段与Flutter中的解释弹出窗口

The question mark is the button itself, and when the user taps it, it shows a dialog or pop up (doesn't need to be like in the picture, but similar) which contains some text.

I was investigating about suffix property, that allows me to do something like that but not in the label text, as label text needs a string, not a widget, and its mandatory for this project to do this in the label text.

Here is the current code of that form field:

DropdownSearch&lt;
            Map&lt;String, dynamic&gt;&gt;(
          dropdownDecoratorProps:
              const DropDownDecoratorProps(
            dropdownSearchDecoration:
                InputDecoration(
              floatingLabelBehavior:
                  FloatingLabelBehavior.auto,
              labelText: &quot;Crop&quot;,
              disabledBorder: InputBorder.none,
              hintText: &#39;Select crop&#39;,
            ),
          ),

          //Dropdown search items
        )

答案1

得分: 2

你可以添加你想要用来显示解释的按钮,然后你可以像这样将它包装在一个Tooltip小部件中:

Tooltip(
    message: 'Explanation here',
    child: Icon(
        Icons.info,
    ),
)

Tooltip默认在长按时触发,但你可以将其更改为在点击时触发,也可以通过以下方式更改消息显示的持续时间:

Tooltip(
    triggerMode: TooltipTriggerMode.tap,
    showDuration: Duration(milliseconds: 5000),
    message: 'Explanation here',
    child: Icon(
        Icons.info,
    ),
)
英文:

What you can do is add the button that you want to use to display the explanation, then you can wrap it a Tooltip widget like this:

                      Tooltip(
                                message:
                                    &#39;Explanation here&#39;,
                                child: Icon(
                                    Icons.info,
                                  ),
                              )

The Tooltip is triggered by default upon a longPress but you can change this to be onTap, you can also change the duration that the message appears for, by doing the following:

                      Tooltip(
                                triggerMode: TooltipTriggerMode.tap,
                                showDuration: Duration(milliseconds: 5000),
                                message:
                                    &#39;Explanation here&#39;,
                                child: Icon(
                                    Icons.info,
                                ),
                              )

huangapple
  • 本文由 发表于 2023年4月17日 17:24:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/76033599.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定