Repository navigation
TextField keyboardType number - no DONE button on iOS #12220
Description
TextInputType.number puts up a phone number style keyboard with no DONE button. Changing to TextInputType.text has a DONE button. iOS 10.3.3. How can I get a numeric keyboard on iOS?
Steps to Reproduce
Create a text field as follows:
TextEditingController controller = new TextEditingController(text: "");
Widget content = new TextField(
autocorrect: false,
autofocus: true,
controller: controller,
keyboardType: TextInputType.number,
maxLines: 1,
onSubmitted: (String value) { Navigator.pop(_context, "ok"); },
);(The text field is in a dialog which is why the onSubmitted does a Navigator.pop)
When keyboard appears it has 0-9, '.' an delete but no Done button. There is no way to 'submit' the number entered into the text field. Our app will do a lot of numeric entry so a numeric keypad is essential. Thanks for any help on this!
Logs
No errors.
Flutter Doctor
[✓] Flutter (on Mac OS X 10.12.6 16G29, locale en-US, channel alpha)
• Flutter at /Users/bartwaggoner/flutter
• Framework revision 701d534ba9 (10 days ago), 2017-09-12 14:01:51 -0700
• Engine revision 31d03de019
• Tools Dart version 1.25.0-dev.11.0
[✓] Android toolchain - develop for Android devices (Android SDK 26.0.1)
• Android SDK at /Users/bartwaggoner/Library/Android/sdk
• Platform android-26, build-tools 26.0.1
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 9.0, Build version 9A235
• ios-deploy 1.9.2
• CocoaPods version 1.3.1
[✓] Android Studio (version 2.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)
[✓] IntelliJ IDEA Community Edition (version 2017.2.4)
• Flutter plugin version 17.0
• Dart plugin version 172.4155.35
[✓] Connected devices
• Barton's iPhone • 4ee038ab9c5211958a5828379a5c6f5033c7b3d9 • ios • iOS 10.3.3
Activity
eseidelGoogle commentedon Sep 22, 2017
@cbracken or @gspencergoog might know.
cbracken commentedon Sep 23, 2017
This isn't something that the iOS number-pad keyboard (currently) supports by default. One option would be to use a
TextInputTypeother thannumber(i.e. the default keyboard) and add validation logic via theonChangedhandler and manipulating the controller you pass in.Another possibility would be to implement an input accessory view in Objective-C. However, since that's not supplied by the OS, localisation would need to be done manually. Example here.
#11344 is tangentially similar (form field navigation) but a bit simpler since the widgets in the keyboard accessory view are likely just '<' and '>' which only require LTR vs RTL localisation.
A final possibility would be to implement your own keyboard view, which is what some apps (e.g., Numbers) do.
bartwaggoner commentedon Sep 23, 2017
Thank you for the response. This must be a problem for a lot of folks I would imagine - maybe we could have a flutter widget for numeric entry that could pop up, rather than the iOS native one? We have a lot of numeric data entry done in the field and need to make it as easy as possible...
Another option is to render a flutter Done button just above the keypad as in this video: https://www.youtube.com/watch?v=RuzHai2RVZU
How does one determine the bottom of the screen and place a widget there when the keyboard is open? (so many newb questions bit we are loving flutter for the most part so far)
cbracken commentedon Oct 12, 2017
@bartwaggoner Flutter currently relies on the system keyboard for text entry, and we don't currently support anything like a keyboard plugin written in Flutter. It would be a fairly massive undertaking since we'd have to integrate with all the underlying platform APIs for all OSes we support.
Aside from the alternatives I mentioned above, as you say, a third alternative would be to add a button yourself. You can get at the padding we add to the bottom of the view when the keyboard pops up with something like this in your
buildmethod:bartwaggoner commentedon Oct 12, 2017
Thanks, I've done something like that. It might still be nice to have a numeric popup dialog (similar to the date or time pickers) that shows a simple numeric keypad with an ok/cancel, as the OS native ones seem to be so variable in their implementations. I may do this using the grid component at some point. Thanks again!
cbracken commentedon Oct 12, 2017
No problem! I'll close this as 'unfortunately working as intended' since I don't think it's likely we'll deal with this in the framework. It may be worth filing a radar with Apple though.
PandaGeek1024 commentedon Nov 10, 2018
Hi, Im facing the same situation now and planning to add the button by myself too. But there is a big problem that how can you get informed of keyboard dismiss(so i can hide the button)? I thought about using platform channel, but don't know how to send message from native to flutter. Is there a better way of doing that? thanks.
loolooii commentedon Nov 30, 2018
It would be an overkill to implement keyboard view for a normal application with a couple of form fields. I would say this is something Apple should have fixed a long time ago, if enough people would have protested. This is just weird considering that iOS doesn't really have a (physical) back button to remove the keyboard anyway.
diegoveloper commentedon Dec 3, 2018
I'm working on a flutter package, it should be ready at 6/7 december.
diegoveloper commentedon Dec 5, 2018
Well, the package is ready, you can take a look and send me feedback if you want :).
https://pub.dartlang.org/packages/keyboard_actions
loolooii commentedon Dec 6, 2018
@diegoveloper cool! Thanks. I will use this and let you know about it.
bluemix commentedon Mar 3, 2019
Please provide a solution for this issue
mischaherbrand commentedon Apr 5, 2019
any news here?
28 remaining items
jigarparmar21 commentedon Jun 24, 2020
Its really amazing, i want this. i face the same problem in ios.
cassioseffrin commentedon Aug 24, 2020
The @webianks solution works very well for me!
syonip commentedon Oct 17, 2020
Shouldn't
onSubmittedsolve this, as described here: https://stackoverflow.com/a/60455958/2942294 ?nohli commentedon Oct 19, 2020
How can you trigger onSubmitted if there is no done button?
This issue is with the number keyboard on iOS.
omidraha commentedon Nov 17, 2020
I reached to this issue, and I have the same issue,
Related SO Link: https://stackoverflow.com/q/53505500
hailemix commentedon Dec 28, 2020
I have a similar issue. Can you please add some behavior on this widget?
a7medpa commentedon Mar 30, 2021
I am actually surprised that there's no real native solution within flutter for this. What's going on - has this been abandoned?
itxtoledo commentedon Jun 15, 2021
why was this issue closed if it still exists?
osystst commentedon Jun 25, 2021
I hate this issue.
gusterwoei commentedon Jul 15, 2021
This is a show-stopper for Flutter as a whole.
syonip commentedon Jul 18, 2021
Did you try https://pub.dartlang.org/packages/keyboard_actions?
omidraha commentedon Jul 18, 2021
diegoveloper/flutter_keyboard_actions#123
trying to add 'done' or 'next' button to numeric keyboard (there is f…
github-actions commentedon Aug 1, 2021
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.