I have just begun using Flutter to create a mobile app.
The first thing I need the app to do is to take an Address/location as input from the user.
I would like to use a text input field that once you start typing it suggests locations based on the google place API.
Sadly there is no widget to enable this out of the box, but it shouldn't be so hard to do. Google's places API returns results based on any text input, so you can just keep sending keystrokes until the user sees (and selects) their desired location. I've got the API working already.
Now I'm struggling with how to build the front end experience.
I was hoping to have a drop-down text field, but I'm not finding anything similar in the widget library.
My next best idea was an input field with a DropdownButton class next to it. I want to make the DropdownButton invisible (0 width) but programmatically make it drop down once the user begins typing.
Sadly I don't see any way to control the visibility of the Dropdown List, so I'm not sure this will work.
Does anyone have any better ideas?
Image of what I have so far but obviously this is not optimal:
It's probably late for an answer but I'll still post this in case anyone else is still curious about this.
If you have the API wired up then what might prove useful is this third-party package.
It's called Flutter Typeahead.
It's a generic input with dropdowns and the data can come from any API and not just the Google Places API.
Related
I am very very new to Kotlin. I made a calculator app that could only add/subtract/multiply/divide and it was still a bit finicky, that's the extent of my knowledge.
I would like to make a very simple app that convert from Celsius to Fahrenheit, BUT every demo I have seen so far required the user to hit a button after they are done inputting the temperature in order for the conversion to occur.
I'd like to make the app have two text fields, which both update live as the other one is being filled out. This way, the user doesn't need to hit any additional "confirm" button, as the conversion will be done in real-time as text is being entered. And when the user switches to the opposing field, the same is done vice versa.
I'm not sure what this is called or how to even begin to Google it. Any pointers? Is this something feasible for a beginner to learn, or is it way more involved than I am anticipating? Am using Android Studio. Thanks!
You can attach TextWatcher using addTextChangedListener to EditText which will be called whenever user will input anything in the EditText
This is an Android question.
Inside my <TextInput> (ReactNative (which renders an EditText in Android)) when the user types "#" and then they use Androids swipe mode to auto-complete a word, it adds a space between the "#" and the autocompleted word. So what I was doing was, onChange of the text, I replace the space between "#" and the word, however while the user is in swift mode, it is really messing things up. The space comes back and the swift autocomplete messes up to another word.
Is there a way in react-native to listen when the user accepts an autocompletion? I want to then check if the previous two chars are a # (hashtag and space) and if so, then replace it with just # (hashtag without space).
I was thinking the onCommitCompletion- https://developer.android.com/reference/android/widget/TextView.html#onCommitCompletion(android.view.inputmethod.CompletionInfo) - fires after a suggested word is accepted - is this true? If it is this would be perfect and I can submit a PR to react-native to accept this for Android.
Here is a video of what's happening: https://gfycat.com/AdmirableGrizzledIrishsetter
Low quality:
This is happening because you are typing a text via Swipe feature of your keyboard. The Swipe feature automatically adds an extra space before and after the String. There is no way to get rid of it, it's an integrated feature of(some) the keyboard. We have no control over it.
Don't worry, the end user is aware of it and all he has to do is type the whole text rather than using Swipe feature to input his text.
Try disabling AutoComplete inside your TextInput , perhaps like <TextInput autoCorrect={false}/>, I'm not sure.
Also, this isn't the problem with Android phones only, try installing GBoard in an Apple Device and you'll face the same problem.
I worked on a major keyboard for 2 years and I have no idea what you mean by "swift mode". But there is no such feature in the generic keyboard API. It may be a feature of some particular keyboard, but there'd be no way to programmatically turn it off.
What you're describing comes closest to sounding like autospacing. This is not a concept that Android has, it would be a concept of each individual keyboard. And since Android knows nothing about it, it can't turn it off (on many keyboards the user could, but that's it).
You might be able to override it (not turn it off, but force the spaces to disappear) if you were to do some work with either overridding the InputConnection or setting a text watcher in Java and altering the text to be inserted, but neither can be done at the react native level- you'd need to write a custom edit text and link that down to react native via a native component.
I think this would be onCommitCompletion - I'm not sure though I am not able to test yet. I think in this callback I would get the position, and see if there is a leading space, and if so then remove that leading space.
I'm currently developing an application targeted at android and desktop devices using apache cordova and HTML5.
In order to get the numeric keyboard to pop up I've used input type="number", which works fine.
However, the input field should also accept strings. The current functionality of type=number is that the ui seems to allow for strings to be entered, but the value property of the element is not changed if the input is invalid (e.g not numberic).
Is there a way of getting the numberic keyboard on mobile devices, while still being able to enter text?
My inital tries consisted of capturing the keydown event and manually setting the this.value property. I've tried this using jQuerys .val() and of course the more 'native' approach element.val += char. None of which work. UI is updated, but the change is not reflected in the model.
EDIT
For the next guy trying to achieve this.
1) The HTML solution.
As #LuudJacobs mentions in the comments below; There's currently no way to decide which keyboard is shown except for defining the type-attribute. Though some devices have a button to go back to alphabet keyboard, its not the case for every device. And can not be used reliably.
2) Writing a phonegap/cordova plugin.
It is possible to write a plugin to show and hide the keyboard at will. But, as far as I could find, there is currently no way of programmatically telling it to default to the symbols keyboard. Thus the functionality achieved is similar to using type=number and type=text in the HTML. Another problem with this approach is the diversity of keyboard for android devices, where even users themselves can install their custom keyboard. The functionality of the keyboard can are therefore unknown. What works on one device, may not work on the next.
3) JS/HTML/Canvas solution
Finally... A feasible solution. I suggest taking a look at this walkthrough as it shows an easy way to creating the keyboard using just html and js. Another option would be to use a canvas, and draw the keyboard yourself, but I would imagine that this is more error prone and harder to do.
As explained in the HTML5 spec you can not have anything but valid floats in a input type="number". So You can not. On a sidenote: how would users enter text when they'd only have a numeric keyboard?
Im currently trying to get my diploma in psychology and i want to write about different types of keyboards for smartphones. To research this area i need a tool that measures times. As Im new to Android programming, my friend is helping me, but we got stuck.
Here is what we need, and what we tried. Id really appreciate any help =)
We need a way to call a function before user input in IME begins and after user input in IME ends. (We need this only for timelogging, we dont need the actual input.)
We also need to call a function before user input for chosing autocorrection starts/ends.
We need to do this for all kinds of IMEs especially keyboards
like Swype, Swiftkey etc (though one of them working is enough)
We tried:
TextWatcher via addTextChangedListener
- seems to be unreliable to get the times beforeTextChanged/afterTextChanged is randomly called, even within a gesture
or multiple times within a gesture
subclassing EditText implementing OnTouchListener,
using onTouch()
- didnt seem to get called at all when using swype, so either we did it wrong or ime/swpye consumes those events,
also tried it with onKeyPreIme, wasnt called either
Ideal would be:
a way of catching the "touch" events before they are passed to the IME to log the current time via System.currentTimeMillis()
the same "after" the gesture ends i.e. when the finger is released from display
we dont need actual code, a link to the right command/documentation/widget would be sweet.
You get bonus cookies if you are ever in berlin and need a place to ... get cookies :)
Not sure if this is much of an answer, but...
Is your plan to write this in an Android application that you can distribute and run on anybody's device?
Sounds like whatever you do on the EditText or your application may not be enough because the IME is a separate module in Android, so you would not be able to get any information about auto correct or prediction or things like that (different IME have different of such features). You would only be able to get the text entered (or removed) from the text entry.
The best I can think of is for you to develop your own IME, then you can log anything you like in there.
To go about that, I would suggest, you first checkout this article from Android Developer:
http://developer.android.com/guide/topics/text/creating-input-method.html
And then you can check out the source code for the default Latin IME there:
http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android-apps/4.0.1_r1/com/android/inputmethod/latin/LatinIME.java
Although this one has probably much more than you need and has (I think) some links into the Android framework itself, so you cannot really build it as a separate module the way it is now.
Hope that helps
I need to give a search box in my android app. As the user starts typing in the search text, I need to show him relevant suggestions. (As we see in the google-search widget on the home screen. If we see from the logs, com.android.quicksearchbox/.SearchActivity is started with android.search.action.GLOBAL_SEARCH intent and it searches in following: corpora:[web, apps, com.android.contacts/.activities.PeopleActivity]).
Only thing is I need the suggestions to be displayed from the web & my application DB.
Any idea how to implement this ? Do I need to implement my own SuggestionsProvider or can I directly use the native implementation? If so, how?
I think i figure it out myself.
Went through Searchable Dictionary code & QuickSearchBox code in android source.
Need two start 2 activities in a background thread. One will search for the search-term in my DB & other will search the same in Google. All the results will be seen in the suggestion list.
Google Suggest API provides suggestions as the user enters the text.