英文:
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:
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:
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',
),
),
//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:
'Explanation here',
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:
'Explanation here',
child: Icon(
Icons.info,
),
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论