Git Product home page Git Product logo

search_place_autocomplete's Introduction

search_place_autocomplete

version

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

preview

Getting Started

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

dependencies:
    search_place_autocomplete:

import 'package:search_place_autocomplete/search_place_autocomplete.dart';

How to use it

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

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

basic implementation

  return SearchPlaceAutoCompleteWidget(
                // YOUR GOOGLE MAPS API KEY 
                  apiKey: PLACES_API_KEY,
                  // Language that you want. Default is English='en' 
                  language: 'en',
                  // Country that you want to filter for. Default is Ethopia='ET'
                  components: "ET",

                  placeholder: "Your current location",

                  onSelected: (Place place){
                    print(place.description);
                  },
                  );

Advanced implementation

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',
    // Country that you want to filter for. Default is Ethopia='ET'
     components: "ET",

    placeholder: "Your current location",
                  
    // 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.newLatLng(geolocation.coordinates));
        controller.animateCamera(CameraUpdate.newLatLngBounds(geolocation.bounds, 0));
    },
);

The constructor has 8 attributes related to the API:

  • 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.
  • PlaceType placeType will allow you to filter Places by its type. For more information on available types, check supported types for Autocompletion. On default, no filters are passed to the request, which means all Place types will be shown on autocompletion.
  • String components A grouping of places to which you would like to restrict your results.Check the full list of [supported country code](Wikipedia: List of ISO 3166 country codes or the ISO Online Browsing Platform) in the documentation.

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

search_place_autocomplete's People

Contributors

haptome avatar

Stargazers

 avatar  avatar

Watchers

James Cloos avatar  avatar

search_place_autocomplete's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.