search_map_place 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 94

search_map_place #

This is a Flutter package that uses the Google Maps API to make a TextField that tries to autocomplete places as the user types, with simple smooth animations, making a nice UI and UX. This will also provide great information about the user selected place, like the coordinates, the bounds to determine the zoom of the GoogleMap widget, and so on.

GIF Example

The zoom in after selection was just an example of what can be done with this package. This doesn't mean that the package has this feature included out of the box.

Getting Started #

To install, add this to your pubspec.yaml file:

    search_map_place: <latest>

After that, make sure you have the following APIs activated in your Google Cloud Platform:

  • Places
  • Geolocation
  • Geocoding

You can now import it to your file and use it on your app.

import 'package:search_map_place/search_map_place.dart';

How to use it #

Where you want to add the search widget, call SearchMapPlaceWidget's constructor:

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SearchMapPlaceWidget(
        apiKey: // YOUR GOOGLE MAPS API KEY

The constructor has 7 attributes:

  • String apiKey is the only required attribute. It is the Google Maps API Key your application is using
  • (Place) void onSelected is a callback function called when the user selects one of the autocomplete options.
  • (Place) void onSearch is a callback function called when the user clicks on the search icon.
  • String language is the Language used for the autocompletion. Default is 'en' (english). Check the full list of supported languages for the Google Maps API
  • LatLng location is the point around which you wish to retrieve place information. If this value is provided, radius must be provided aswell.
  • int radius is the distance (in meters) within which to return place results. Note that setting a radius biases results to the indicated area, but may not fully restrict results to the specified area. If this value is provided, location must be provided aswell. See Location Biasing and Location Restrict in the Google Maps API documentation.
  • bool restrictBounds will return only those places that are strictly within the region defined by location and radius.

The Place class

This class will be returned on the onSelected and onSearch methods. It allows us to get more information about the user selected place.

Initially, it provides you with only basic information:

  • description contains the human-readable name for the returned result. For establishment results, this is usually the business name.
  • placeIdA textual identifier that uniquely identifies a place. For more information about place IDs, see the Place IDs overview.
  • types contains an array of types that apply to this place. The array can contain multiple values. Learn more about Place types.
  • fullJSON has the full JSON response received from the Places API. Can be used to extract extra information. More info on the Places Autocomplete API documentation

However, you can get more information like the coordinates and the bounds of the place by calling

await myPlace.geolocation;

Example #

Here's an example of the widget being used:

return SearchMapPlaceWidget(
    apiKey: YOUR_API_KEY,
    // The language of the autocompletion
    language: 'en',
    // The position used to give better recomendations. In this case we are using the user position
    location: userPosition.coordinates,
    radius: 30000,
    onSelected: (Place place) async {
        final geolocation = await place.geolocation;

        // Will animate the GoogleMap camera, taking us to the selected position with an appropriate zoom
        final GoogleMapController controller = await _mapController.future;
        controller.animateCamera(CameraUpdate.newLatLngBounds(geolocation.bounds, 0));

Future Implementations #

There are a lot of features that can be added to this package. Here are some features I want to implement (or could be implemented by someone else):

  • [] Make the widget more personalized
  • [] Make documentation to use the created API and Classes from the package, without having to use the widget itself.
  • [] Make this package independent of google_maps_flutter

[0.1.0] - May 29th, 2019

  • Added a Search widget, that displays autocompletion options
  • Widget has smooth animations
  • On user selection, returns various information about the place

[0.1.0+1] - May 29th, 2019

Fixed naming of a method.

[0.1.0+2] - June 3rd, 2019

Added suggested actions from Pub

[0.1.1] - November 16th, 2019

API error handling, widget is now a little more customizable (color and icon), added Google Cloud Platform instructions in documentation.


import 'dart:async';

import 'package:flutter/material.dart';

import 'package:search_map_place/search_map_place.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

String apiKEY;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Search Map Place Demo',
      home: MapSample(),

class MapSample extends StatefulWidget {
  State<MapSample> createState() => MapSampleState();

class MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _mapController = Completer();

  final CameraPosition _initialCamera = CameraPosition(
    target: LatLng(-20.3000, -40.2990),
    zoom: 14.0000,

  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Stack(
        children: <Widget>[
            mapType: MapType.normal,
            initialCameraPosition: _initialCamera,
            onMapCreated: (GoogleMapController controller) {
            top: 60,
            left: MediaQuery.of(context).size.width * 0.05,
            // width: MediaQuery.of(context).size.width * 0.9,
            child: SearchMapPlaceWidget(
              apiKey: API_KEY,
              radius: 30000,
              onSelected: (place) async {
                final geolocation = await place.geolocation;

                final GoogleMapController controller = await _mapController.future;

                controller.animateCamera(CameraUpdate.newLatLngBounds(geolocation.bounds, 0));

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  search_map_place: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:search_map_place/search_map_place.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jan 21, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Fix lib/src/searchMapPlaceWidget.dart. (-0.50 points)

Analysis of lib/src/searchMapPlaceWidget.dart reported 1 hint:

line 124 col 23: The for, if, and spread elements weren't supported until version 2.3.0, but this code is required to be able to run on earlier versions.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
google_maps_flutter ^0.5.13 0.5.21+15
http ^0.12.0+2 0.12.0+4
Transitive dependencies
async 2.4.0
charcode 1.1.2
collection 1.14.11 1.14.12
http_parser 3.1.3
meta 1.1.8
path 1.6.4
pedantic 1.9.0
sky_engine 0.0.99
source_span 1.6.0
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies