You can also read this article in my Xcoding With Alfian blog website using the link below.

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:

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

: Official Google Map View plugin from the Flutter team that uses 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

: 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

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.

There are several configuration steps we need to perform before we can begin to build the app:

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. 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.

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. 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. 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

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 . 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. When the widget initializes, the fetchPlaceDetail method is invoked to retrieve the detail of the place using the placeId from the Google Places API. It will then assigned the details as the state of the widget.

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

That’s a wrap!. In such a short time we have been able to build cross platform native mobile application with high performance and rapid development that runs on Android & iOS. Flutter provides unlimited potential to us mobile developers to create the most delightful app to our users. The sky is the limit! 😋.