Attempt to implement a date picker, and form field hidden behind keyboard
Also, if I add a signature to the document it glitches out. If the signature is really short it is okay but if I try a full name then the glitching occurs. See image below.
Edit I did find this post: https://github.com/syncfusion/flutter-examples/issues/792 Which goes over how it is an impeller issue with flutter. This is unfortunate as the way forward with flutter is now via Impeller as it is opt-out only now.
Does the team have any plans to adapt this to work with impeller?
Regarding the combo box form field:
Using the dialog like the list box form field is not the same. It takes a users focus away from the location in the document where the dropdown is, and it requires 3 user inputs to select an item (tap field -> tap item -> tap confirm). These two differences make it a less friendly user experience.
I have made a change to the ComboBox as shown below in the images:
This meets my requirements and is functionally the same as before, with a scrollbard.
code (Note: I did not style the button to make it sized and proportioned correctly for different button sizes and themes, but built this basic one to demonstrate my idea):
class _PdfComboBoxState extends State<PdfComboBox> {
@override
Widget build(BuildContext context) {
var newButton = DropdownButtonFormField<String>(
onChanged: widget.readOnly ? null : (value) =>
(widget.onValueChanged != null) ? widget
.onValueChanged!(value ?? '') : null,
menuMaxHeight: 300,
decoration: InputDecoration(border: InputBorder.none),
items: widget.items.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(fontSize: 15),
),
);
}).toList(),
);
return Container(
decoration: const BoxDecoration(
color: Color.fromARGB(255, 221, 228, 255)
),
child: newButton,
// child: PopupMenuButton( // tooltip: '',
// constraints: const BoxConstraints(maxHeight: 300),
// itemBuilder: (BuildContext context) {
// return widget.items.map((String value) {
// return PopupMenuItem( // value: value,
// child: Text(
// value,
// style: const TextStyle(fontSize: 15),
// ),
// );
// }).toList();
// },
// enabled: !widget.readOnly,
// onSelected: widget.onValueChanged,
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children:[ // // Adjust the spacing between the icon and text
// Text(widget.selectedItem,
// style:
// TextStyle(color: Colors.black, fontSize: widget.fontSize)),
// Icon(
// Icons.arrow_drop_down_outlined,
// size: widget.bounds.height / widget.heightPercentage,
// color: Colors.black,
// ),
// ],
// ),
// ),
);
}
}
Regarding onFormFieldFocusChange callback:
Thanks for the update, looking forward to it!
Regarding the hiding of form fields when the keyboard is raised:
I believe this is a consequence of using a 'Positioned' Widget with the top of the screen rather than the bottom. See this example below which does properly resize the InteractiveViewer when a keyboard shows. I believe that the 'PdfTextFormFieldHelper' in SyncfusionPdfViewer is using `bottom: bounds.top / heightPercentage` to position the text field, and this should instead be based on the bottom of the screen.
Scaffold(
resizeToAvoidBottomInset: true,
body: InteractiveViewer(
boundaryMargin: const EdgeInsets.all(100.0),
minScale: 0.1,
maxScale: 1.6,
child: Stack(
children: [
Positioned(
bottom: 100,
child: Container(
color: Colors.green,
height: 50,
width: 200,
child: TextFormField(),
),
),
],
),
),
)
Regarding combo box form field:
In my PDF I have a state selector listing the 50 US states and a few of the US territories as well. From the screenshot you showed me, it appears this would take up the full screen and more. How is that experience for the user? Can it be shrunk to the same height and show only a few items at a time and scroll the rest?
I did take a look at the PdfComboBox class as well and I do think that the issues with text and alignment are just parameters that need tuning. I put together a sample here that shows an updated _PdfComboBoxState class. The contentPadding in the InputDecoration makes it so the whole box is clickable, the selectedItemBuilder makes it so that the shown selection is the same font as in the PDF, and the style parameter (with a height of 1) makes it so that the text is centered with the right size with no clipping.
class _PdfComboBoxState extends State<PdfComboBox> {
@override
Widget build(BuildContext context) {
var newButton = DropdownButtonFormField<String>(
onChanged: widget.readOnly ? null : (value) =>
(widget.onValueChanged != null) ? widget
.onValueChanged!(value ?? '') : null,
menuMaxHeight: 300,
value: widget.selectedItem,
// to show the text same size as in pdf
selectedItemBuilder: (_) =>
widget.items.map((String value) =>
Text(
value,
style: TextStyle(
fontSize: widget.fontSize ?? 14,
color: Colors.black,
),
)
).toList(),
iconEnabledColor: Colors.black,
iconDisabledColor: Colors.grey,
// current theme for text style, size of 1 to not cut off bottom of text.
style: Theme
.of(context)
.textTheme
.titleMedium
?.copyWith(fontSize: widget.fontSize ?? 14, height: 1),
decoration: InputDecoration(
border: InputBorder.none,
// resize click box to the size of field
// I am not quite sure how you are sizing the box here, but the idea is to
// pad the content so that the click area is the size of the blue area.
// This centers the text too.
contentPadding: EdgeInsets.symmetric(
vertical: false ? 0 : ((widget.bounds.height /
widget.heightPercentage)) - //+ (widget.fontSize ?? 14)) / 2 -
(widget.fontSize ?? 14),
),
// helps ro remove paddings and such
isDense: true,
),
items: widget.items.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value, style: const TextStyle(fontSize: 14)),
);
}).toList(),
);
return Container(
decoration: const BoxDecoration(
color: Color.fromARGB(255, 221, 228, 255)
),
child: newButton,
);
}
}
Screenshot of the resultant combo box in a PDF (the top box is a larger text, and all the others show different size boxes):
Hi Jeremy Isenburg,
We have checked the feasibility of using `DropDownButton` instead of `PopupMenuButton` for rendering combo box form field. During our analyzation, we encountered an issue where, if an item's text is excessively long, the text gets wrapped, resulting in an unappealing appearance within the popup. It seems that this issue is with the `DropDownButton` and it can be replicated in a simple sample itself. The composition we used to replicate this issue is given below,
class ComboBoxDemo extends StatefulWidget { const ComboBoxDemo({super.key}); @override State<ComboBoxDemo> createState() => _ComboBoxDemoState(); } class _ComboBoxDemoState extends State<ComboBoxDemo> { final List<String> _items = <String>[ 'One', 'Two', 'Three', 'Four', 'Five', 'Goooooooooooooooooogle' ]; String? value; @override void initState() { value = _items[0]; super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: InteractiveViewer( constrained: false, child: Stack( children: [ SizedBox( width: 300, height: 500, ), Positioned( left: 50, top: 50, width: 75, height: 50, child: Container( decoration: const BoxDecoration( color: Color.fromARGB(255, 221, 228, 255), ), child: DropdownButton<String>( items: _items.map((String value) { return DropdownMenuItem<String>( value: value, child: Text( value, ), ); }).toList(), value: value, selectedItemBuilder: (context) { return _items.map((String value) { return Align( alignment: Alignment.centerLeft, child: Text( value, softWrap: false, ), ); }).toList(); }, isExpanded: true, underline: Container(), onChanged: (String? value) { setState(() { this.value = value; }); }, ), ), ), ], ), ), ); } } |
We will analyze further on the solution for this issue and will provide further details on August 14, 2023.
I checked how the Adobe Viewer handles this, and it will cut off the text like so:
This can be solved by giving the Text an overflow (I also set the "menuMaxHeight: 400" property):
Text(
value,
overflow: TextOverflow.ellipsis,
),
