Building Places & Location Search with

Map View Using Flutter 1.0

Alfian Losari Follow
Dec 11, 2018 · 5 min read

Flutter has just achieved its latest milestone with the release of stable
1.0 version. It has many amazing features that provide a foundation
for amazing future ahead as it matures. Here are several of the great
features:

• PlatformView. Widget to render native platform view such as iOS

UIView and Android View

• MapView plugin. Widget to display Google Map View built on top

of PlatformView API

• Add to App: Tools to convert existing iOS and Android apps to

Flutter in stages.

• Flutter Desktop Embedding & Hummingbird: An initiative to

bring Flutter to Web & Desktop.

To celebrate the release of Flutter 1.0, we are going to build an app to

display and search nearby places inside Map View using Google Map
and Google Places API.

You can download the source code of the project in the GitHub
repository below:
 alfianlosari/flutter_placez
Display & Search your nearby places.
This app uses Flutter 1.0
PlatformView to display Google Map
as a Flutter Widget…
github.com

What we will build

• Project Setup & Import dependencies

• Building Main List that displays popular places around user

location using GPS access

• Building Detail Screen that displays the place location inside the
Map with associated information (name, address, photos, etc)

• Search Places using Google Places Autocomplete

Project Setup & Import Dependencies

First make sure you have upgraded your Flutter SDK to 1.0.0 using
flutter upgrade command from your shell.

Create a new project using flutter create create command, open

the project using Visual Studio Code or Android Studio.

Next, we will add dependencies inside the pubspec.yaml file. There

are 3 dependencies we will use:

• google_maps_flutter : Official Google Map View plugin from the

Flutter team that uses PlatformView under the hood. It is still in
Developer Preview status, so breaking changes and bugs can be
expected. Link

• flutter_google_places : Plugin from Hadrien Lejard that

provides interface to us to communicate with the Google Places
Autocomplete API. Link

• location : Plugin from Guillaume Bernos that uses Platform

Channel API to access GPS on Android & iOS devices used to get
user current location. Link
 1 name: Placez
2 description: Display & Search your nearby places
3
4 version: 1.0.0+1
5
6 environment:
7 sdk: ">=2.0.0-dev.68.0 <3.0.0"
8
9 dependencies:
10 flutter:
11 sdk: flutter
12
13 google_maps_flutter: ^0.0.3
14 flutter_google_places: ^0.1.4
15 location: ^1.4.1

Our app uses Google Maps & Google Places services under the hood to
display map view and fetch nearby places, so we need Google API Key
for Map & Places. Make sure to create the API key from the site below.

Places | Google Maps Platform |

Google Cloud
Connect your app or website users
to over 100 million points of
interests with Places, using
Autocomplete, Geocoding &…
cloud.google.com

There are several configuration steps we need to perform before we

can begin to build the app:

1. iOS platform need to opt-in for Flutter embedded 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 .
Make sure to also add NSLocationWhenInUseUsageDescription &

NSLocationAlwaysUsageDescription with the description text for

GPS access permission.

2. iOS platform need to 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

3. Android platform need to specify your API key and add permissions
in the application manifest
android/app/src/main/AndroidManifest.xml

<manifest ...
<uses-permission
android:name="android.permission.INTERNET"/> <uses-
permission
android:name="android.permission.ACCESS_FINE_LOCATION" />

<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
Building Trending Around Places
List Screen

Main List Screen

In our main screen, we will ask user to grant GPS access and access
their location, then we will ask the Google Places API to get nearby
places to visit around. Make sure to paste your Google API key in the
YOUR_API_KEY placeholder.

1. This widget consists of Scaffold with AppBar containing 2

actions item, refresh and search  . The body uses Column

with MapView as the first item, the second item wraps the
ListView in an Expanded widget so it can flex all the remaining
vertical space of the screen.
2. When the MapView has been created, a method is invoked to
assign the MapControlller as the widget property, then it calls
the refresh method that will asks user their current location
using location plugin, then using the location it will invoke
getNearbyPlaces to retrieve the nearby places using
flutter_google_places plugin, then assigned the places as the
state of the widget.

3. The places will be displayed in a Card inside ListView , each

row shows the place name, address, and type. The inline
MapView on the top displays all the pin marker of the places.
When user taps on the row, the app will navigate to the place
detail screen passing the placeId  .
Building Place Detail Screen

Place Detail Screen

This screen displays the detail of the Places when user taps on the row
of the main list screen with a MapView and the pin marker. Make sure
to paste your Google API key in the YOUR_API_KEY placeholder

1. The widget consists of Scaffold  , with AppBar that displays the

name of the place inside the Title  . The main body used the
approach from the main widget that uses Column to stack widget
vertically, MapView and ListView  .

2. ListView displays the places information such as the name,

address, phone number for each of its item  . It also displays the
photos of the place in a horizontal ListView that acts like a
carousel in the first item.
3. 1When the widget
import initializes, the
'dart:async'; fetchPlaceDetail method is
2invoked to 'package:google_maps_webservice/places.dart';
import retrieve the detail of the place using the placeId from
3the import
Google'package:flutter_google_places/flutter_google_places.dart'
Places API. It will then assigned the details as the
4 state of the
import widget.
'package:flutter/material.dart';
5 import 'package:google_maps_flutter/google_maps_flutter.dart'
6 import 'package:location/location.dart' as LocationManager;
7 import 'place_detail.dart';
8
9 const kGoogleApiKey = "TOUR_API_KEY";
10 GoogleMapsPlaces _places = GoogleMapsPlaces(apiKey: kGoogleApiKey);
11
12 void main() {
13 runApp(MaterialApp(
14 title: "PlaceZ",
15 home: Home(),
16 debugShowCheckedModeBanner: false,
17 ));
18 }
19
20 class Home extends StatefulWidget {
21 @override
22 State<StatefulWidget> createState() {
23 return HomeState();
24 }
25 }
26
27 class HomeState extends State<Home> {
28 final homeScaffoldKey = GlobalKey<ScaffoldState>();
29 GoogleMapController mapController;
30 List<PlacesSearchResult> places = [];
31 bool isLoading = false;
32 String errorMessage;
33
34 @override
35 Widget build(BuildContext context) {
36 Widget expandedChild;
37 if (isLoading) {
38 expandedChild = Center(child: CircularProgressIndicator
39 } else if (errorMessage != null) {
40 expandedChild = Center(
41 child: Text(errorMessage),
42 );
43 } else {
44 expandedChild = buildPlacesList();
45 }
46
47 return Scaffold(
48 key: homeScaffoldKey,
49 appBar: AppBar(
50 title: const Text("PlaceZ"),
51 actions: <Widget>[
52 isLoading
53 ? IconButton(
54 icon: Icon(Icons.timer),
55 onPressed: () {},
Building Search with Google Places
Autocomplete

Search Places Autocomplete Screen

When user taps on the search ActionBar un the main list AppBar . We
will display a search bar where user can enter the name of the place
they want to search. Then it will provide Autocomplete suggestions
using Google Places autocomplete API for user to choose using a
dropdown.

When they tap on the place, we just navigate to the place detail widget
passing the placeId just like the nearby places item in the main
widget ListView.
Conclusion
1 import 'package:google_maps_webservice/places.dart';
2 import 'package:flutter/material.dart';
That’s
3 a wrap!.
import In such a short time we have been able to build cross
'package:google_maps_flutter/google_maps_flutter.dart'
platform
4 native mobile application with high performance and rapid
development
5 constthat runs on Android
kGoogleApiKey & iOS. Flutter provides unlimited
= "YOUR_API_KEY";
potential
6 to us mobile
GoogleMapsPlaces _places = GoogleMapsPlaces(apiKey: kGoogleApiKey);
developers to create the most delightful app to our users.
7 The sky is the
limit! 
8 .
class PlaceDetailWidget extends StatefulWidget {
9 String placeId;
10
11 PlaceDetailWidget(String placeId) {
12 this.placeId = placeId;
13 }
14
15 @override
16 State<StatefulWidget> createState() {
17 return PlaceDetailState();
18 }
19 }
20
21 class PlaceDetailState extends State<PlaceDetailWidget> {
22 GoogleMapController mapController;
23 PlacesDetailsResponse place;
24 bool isLoading = false;
25 String errorLoading;
26
27 @override
28 void initState() {
29 fetchPlaceDetail();
30 super.initState();
31 }
32
33 @override
34 Widget build(BuildContext context) {
35 Widget bodyChild;
36 String title;
37 if (isLoading) {
38 title = "Loading";
39 bodyChild = Center(
40 child: CircularProgressIndicator(
41 value: null,
42 ),
43 );
44 } else if (errorLoading != null) {
45 title = "";
46 bodyChild = Center(
47 child: Text(errorLoading),
48 );
49 } else {
50 final placeDetail = place.result;
51 final location = place.result.geometry.location;
52 final lat = location.lat;
53 final lng = location.lng;
54 final center = LatLng(lat, lng);
55