google maps place picker
a flutter plugin which provides ‘picking place’ using google maps widget.
the project relies on below packages.
map using flutter’s official google_maps_flutter
fetching current location using baseflow’s geolocator
place and geocoding api using hadrienlejard’s google_maps_webservice
builder using kevmoo’s tuple
support
if the package was useful or saved your time, please do not hesitate to buy me a cup of coffee! 😉
the more caffeine i get, the more useful projects i can make in the future.
getting started
get an api key at https://cloud.google.com/maps-platform/.
android
specify your api key in the application manifest android/app/src/main/androidmanifest.xml
:
<manifest ...
<application ...
<meta-data android:name="com.google.android.geo.api_key"
android:value="your key here"/>
note: as of version 3.0.0 the geolocator plugin switched to the androidx version of the android support libraries. this means you need to make sure your android project is also upgraded to support androidx. detailed instructions can be found here.
the tl;dr version is:
- add the following to your “gradle.properties” file:
android.useandroidx=true android.enablejetifier=true
- make sure you set the
compilesdkversion
in your “android/app/build.gradle” file to 28:android { compilesdkversion 28 ... }
- make sure you replace all the
android.
dependencies to their androidx counterparts (a full list can be found here: https://developer.android.com/jetpack/androidx/migrate).
ios
specify your api key in the application delegate ios/runner/appdelegate.m
:
#include "appdelegate.h"
#include "generatedpluginregistrant.h"
#import "googlemaps/googlemaps.h"
@implementation appdelegate
- (bool)application:(uiapplication *)application
didfinishlaunchingwithoptions:(nsdictionary *)launchoptions {
[gmsservices provideapikey:@"your key here"];
[generatedpluginregistrant registerwithregistry:self];
return [super application:application didfinishlaunchingwithoptions:launchoptions];
}
@end
or in your swift code, specify your api key in the application delegate ios/runner/appdelegate.swift
:
import uikit
import flutter
import googlemaps
@uiapplicationmain
@objc class appdelegate: flutterappdelegate {
override func application(
_ application: uiapplication,
didfinishlaunchingwithoptions launchoptions: [uiapplicationlaunchoptionskey: any]?
) -> bool {
gmsservices.provideapikey("your key here")
generatedpluginregistrant.register(with: self)
return super.application(application, didfinishlaunchingwithoptions: launchoptions)
}
}
opt-in to the embedded views preview by adding a boolean property to the app’s info.plist
file
with the key io.flutter.embedded_views_preview
and the value yes
.
usage
basic usage
you can use placepicker by pushing to a new page using navigator.
when the user picks a place on the map, it will return the result (pickresult).
navigator.push(
context,
materialpageroute(
builder: (context) => placepicker(
apikey: apikeys.apikey, // put your own key here.
onplacepicked: (result) {
print(result.address);
navigator.of(context).pop();
},
initialposition: homepage.kinitialposition,
usecurrentlocation: true,
),
),
);
pickresult
parameter | type | description |
---|---|---|
placeid | string | a textual identifier that uniquely identifies a place. to retrieve information about the place, pass this identifier in the placeid field of a places api request. see placeid for more information. |
geometry | geometry | contains geometry information about the result, generally including the location (geocode) of the place and (optionally) the viewport identifying its general area of coverage. |
address | string | a string containing the human-readable address of this place. often this address is equivalent to the “postal address”. |
types | list <string> |
contains an array of feature types describing the given result. see the list of supported types. xml responses include multiple <type> elements if more than one type is assigned to the result. |
addresscomponents | list <addresscomponent> |
an array containing the separate components applicable to this address. |
more info about results at google.
place picker
parameter | type | description |
---|---|---|
apikey | string | (required) your google map api key |
onplacepicked | callback(pickresult) | invoked when user picks the place and selects to use it. this will not be called if you manually build ‘selectedplacewidgetbuilder’ as you will override default ‘select here’ button. |
initialposition | latlng | initial center position of google map when it is created. if usecurrentlocation is set to true, it will try to get device’s current location first using geolocator. |
usecurrentlocation | bool | whether to use device’s current location for initial center position |
desiredlocationaccuracy | locationaccuracy | accuracy of fetching current location. default to ‘high’. |
hinttext | string | hint text of search bar |
searchingtext | string | a text which appears when searching is performing. default to ‘searching…’ |
searchbarheight | double | height of search bar. default 40. recommended using together with contentpadding. |
contentpadding | edgeinsetsgeomery | content padding of search bar input textfield’s inputdecoration |
proxybaseurl | string | used for api calling on google maps. in case of using a proxy the baseurl can be set. the apikey is not required in case the proxy sets it. |
httpclient | client | used for api calling on google maps. in case of using a proxy url that requires authentication or custom configuration. |
autocompletedebounceinmilliseconds | int | debounce timer for auto complete input. default 500 |
cameramovedebounceinmilliseconds | int | debounce timer for searching place with camera(map) dragging. default 750 |
intialmaptype | maptype | maptypes of google map. default normal. |
enablemaptypebutton | bool | whether to display maptype change button on the map |
enablemylocationbutton | bool | whether to display my location button on the map |
onautocompletefailed | callback(string) | invoked when auto complete search is failed |
ongeocodingsearchfailed | callback(string) | invoked when searching place by dragging the map failed |
onmapcreated | mapcreatedcallback | returens google map controller when created |
selectedplacewidgetbuilder | widgetbuilder | specified on below section |
pinbuilder | widgetbuilder | specified on below section |
customizing picked place visualisation
by default, when a user picks a place by using auto complete search or dragging the map, we display the information at the bottom of the screen (floatingcard).
however, if you don’t like this ui/ux, simple override the builder using ‘selectedplacewidgetbuilder’. flocatingcard widget can be reused which floating around the screen or build entirly new widget as you want. it is stacked with the map, so you might want to use positioned widget.
note that using this customization will not invoke [onplacepicked] callback as it will override default ‘select here’ button on floating card
...
placepicker(apikey: apikeys.apikey,
...
selectedplacewidgetbuilder: (_, selectedplace, state, issearchbarfocused) {
return issearchbarfocused
? container()
// use floatingcard or just create your own widget.
: floatingcard(
bottomposition: mediaquery.of(context).size.height * 0.05,
leftposition: mediaquery.of(context).size.width * 0.05,
width: mediaquery.of(context).size.width * 0.9,
borderradius: borderradius.circular(12.0),
child: state == searchingstate.searching ?
center(child: circularprogressindicator()) :
raisedbutton(onpressed: () { print("do something with [selectedplace] data"); },),
);
},
...
),
...
parameters | type | description |
---|---|---|
context | buildcontext | flutter’s build context value |
selectedplace | pickresult | result data of user selected place |
state | searchingstate | state of searching action. (idle, searching) |
issearchbarfocused | bool | whether the search bar is currently focused so the keyboard is shown |
customizing pin
by default, pin icon is provided with very simple picking animation when moving around.
however, you can also create your own pin widget using ‘pinbuilder’
placepicker(apikey: apikeys.apikey,
...
pinbuilder: (context, state) {
if (state == pinstate.idle) {
return icon(icons.favorite_border);
} else {
return animatedicon(.....);
}
},
...
),
...
parameters | type | description |
---|---|---|
context | buildcontext | flutter’s build context value |
state | pinstate | state of pin. (preparing; when map loading, idle, dragging) |
place picker place pickerplace pickerplace pickerplace pickerplace pickerplace pickerplace pickerplace picker
changing colours of default floatingcard (prediction tile)
while you can build your own prediction tile, you still can change the style of default tile using themedata as below:
theme: themedata.dark().copywith(
cardcolor: colors.grey, // background color of the floatingcard
buttontheme: buttonthemedata(
buttoncolor: colors.yellow, // select here's button color
texttheme: buttontexttheme.primary, // applying this will automatically change text color based on buttoncolor. (button color is dark ? white / is light ? black)
),
texttheme: texttheme(
body1: textstyle(color: colors.white), // this will change the text color of floatingcard
),
),
Comments are closed.