The PlacePicker widget is used to get information about the places like establishments (buildings, parks, museums, etc) and geographic locations (roads, lakes, mountains, etc). This information includes name, address, city, state, country, zip code, and LatLong details.
A pretty common use case of using the PlacePicker widget is in a cab booking app. For example, you could use the PlacePicker widget to get the exact location of a place (LatLong) with the full address to display on a page or a Google Map.
The PlacePicker widget looks like a button. When you tap on it, it allows you to search for a place. As you start typing the place name, it shows a list of matching places. On selecting the place, the place name appears on a button. The other information about the place is accessible using the placePickerValue variable (from Widget State).
On this page, you will learn how to add the PlacePicker widget and show the selected place on Google Map.
Let's build a simple example that shows selected place details in a Text widget. Here is how it looks:
Adding PlacePicker and showing the place information comprises of following steps
For the PlacePicker widget to work correctly, you need to have a billing account that is compatible with Google Maps Platform services (in Google Developers Console).
If you have a billing account created while setting up the Firebase, you can verify if your existing account support Google Maps Platform Billing here. Basically, if your billing account supports USD billing, skip this step.
If your current billing account is not compatible with Google Maps Platform Billing, you need to perform all the steps mentioned here (including Additional changes).
Failing to enable the Google Maps Platform Billing will not show any place in an autocomplete list.
Enabling Places API allows you to access the Google Maps servers and returns the information about the place.
To enable Places API:
- Click on the APIs & Services -> Library menu on the left.
- Search and select the Places API card.
- Click Enable.
Enable Places API
You must add the API keys to your FlutterFlow project that will allow your app to communicate with the Google server.
You can skip this step if you have already added the keys while setting up the Google Map.
To add the API keys:
- Click the APIs & Services -> Credentials menu on the left.
- Find the key Android key (auto-created by Firebase), click on SHOW KEY and then copy the key (click onicon)
- Now, go to the FlutterFlow project, and navigate to Settings and Integrations > Integrations > Google Maps.
- Find the Android API Key input box and paste the key.
- Similarly, copy the iOS key (auto-created by Firebase) and Browser key (auto-created by Firebase) from the Google developer console and paste it into the iOS API Key and Web API Key input boxes respectively.
Add keys to FlutterFlow
To add the PlacePicker widget to your project:
- Drag the PlacePicker widget from the Form Elements tab (in the Widget Panel) or add it directly from the widget tree.
- Below the PlacePicker widget add some Text widgets to show the information about the place.
Adding PlacePicker widget
After adding the PlacePicker widget, you can display all information about the place such as name, address, and state by accessing the placePickerValue from the Widget State.
To retrieve the place information:
- Select the Text widget from the widget tree or from the canvas area.
- Move to the properties panel, and click on the Set from Variable.
- Set the Source to Widget State.
- Set the Available Options to placePickerValue.
- Select the Place Fields to the field that you would like to display.
- Set the Default Value if you wish to. This will be displayed if the value from the field is empty.
Retrieve place information
Sometimes you might want to show the selected place from the PlacePicker widget on to the Map. For example, setting the pickup and drop location on the map. You can achieve this by adding the Move Map Center action and providing the LatLong values retrieved from the PlacePicker widget.
Let's build an example showing the selected place on Google Map. Here is what it looks like:
Showing selected place on Google Map
The steps to build the example are as follows:
To build the UI:
- First, remove the Column widget and replace it with the Stack widget from the Form Elements tab (in the Widget Panel) or add it directly from the widget tree.
- Inside the Stack, add the Google Map widget to show the place location.
- Now, add the PlacePicker widget and rearrange its position.
- Add the Button widget to add an action that will bring the selected place to the center.
You can add an action to move the map and show the location in the center by following the instructions on the below page.