flutter_places_dialog 1.0.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new50

flutter_places_dialog

Shows a places picker dialog in ios and android, returning the data in the places picker to the app.

Getting Started

Generate your API Key

  1. Go to: https://console.developers.google.com/
  2. Enable Google Maps Android API
  3. Enable Google Maps SDK for iOS
  4. Under Credentials, choose Create Credential.
    • Note: For development, you can create an unrestricted API key that can be used on both iOS & Android. For production it is highly recommended that you restrict.
  • More detailed instructions for Android can be found here: https://developers.google.com/maps/documentation/android-api/signup
  • More detailed instructions for iOS can be found here: https://developers.google.com/maps/documentation/ios-sdk/get-api-key

The way you register your API key on iOS vs Android is different. Make sure to read the next sections carefully.

iOS

The maps plugin will request your users location when needed. iOS requires that you explain this usage in the Info.plist file

  1. Set the NSLocationWhenInUseUsageDescription in ios/Runner/Info.plist. Example:
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>Using location to display on a map</string>
  1. Prior to using the Map plugin, you must call MapView.setApiKey(String apiKey). Example:
   import 'package:map_view/map_view.dart';

   void main() {
     MapView.setApiKey("<your_api_key>");
     runApp(new MyApp());
   }

Note: If your iOS and Android API key are different, be sure to use your iOS API key here.

  1. Add code to show the MapView.
    //Create an instance variable for the mapView
    var _mapView = new MapView();
    
//Add a method to call to show the map.
void showMap() {
    _mapView.show(new MapOptions(showUserLocation: true));
}
```
  1. Run your application on an iOS device or simulator. Confirm that when you display the map you see map detail. If you only see a beige screen it's possible that your API key is incorrect. When your API key is incorrect you'll see messages like this in the console:
  ClientParametersRequest failed, 7 attempts remaining (0 vs 12). Error Domain=com.google.HTTPStatus Code=400 "(null)" UserInfo={data=<>}

Common API Key problems for iOS

  1. Your Bundle ID does not match what is registered in the Google API Console. When you create an restricted API key in the Google API console it asks you to specify your iOS bundle ID. Make sure that your iOS Bundle Identifier matches the one you registered in the console.

  2. Using the wrong key. If you made a separate key for iOS and Android, make sure you are using the iOS key in the MapView.setApiKey() call.

Android

You will be making multiple edits to your AndroidManifest.xml file. In your Flutter project, you can find this file location under android/app/src/main

  1. In your AndroidManifest.xml, add the following uses-permission above the <application> tag.

         <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
         <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    
  2. In your AndroidManifest.xml, add the following lines inside of the application tag. Be sure to replace your_api_key with the one you generated.

         <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="your_api_key"/>
         <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/>
    
  3. Add the MapActivity to your AndroidManifest.xml

         <activity android:name="com.apptreesoftware.mapview.MapActivity" android:theme="@style/Theme.AppCompat.Light.DarkActionBar"/>
    
  4. In your android/build.gradle file. Under buildScript dependencies add:

         classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.1.2-4'
    
  5. Run your application on an Android device or simulator. Confirm that when you display the map you see map detail. If you only see a beige screen it's possible that your API key is incorrect.

Features

  • [X] iOS Support
  • [X] Android Support

Usage examples

Show a map ( with a toolbar )

  PlaceDetails place = await FlutterPlacesDialog.getPlacesDialog();

[0.0.1] - TODO: Add release date.

  • TODO: Describe initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_places_dialog/flutter_places_dialog.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  PlaceDetails _place;

  @override
  void initState() {
    super.initState();
    FlutterPlacesDialog
        .setGoogleApiKey(/*"AIzaSyBVJ6DGEqQv4lRicySx0siZTCk-9lXY6lY" */"");
  }

  // Platform messages are asynchronous, so we initialize in an async method.
  showPlacePicker() async {
    PlaceDetails place;
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      place = await FlutterPlacesDialog.getPlacesDialog();
    } on PlatformException {
      place = null;
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    print("$place");
    setState(() {
      _place = place;
    });
  }

  @override
  Widget build(BuildContext context) {
    Widget body;

    if (_place == null) {
      body = new Center(
        child: new Text('No place picked'),
      );
    } else {
      body = new ListView(
        children: <Widget>[
          new Text(_place.address),
          new Text(_place.name),
          new Text(_place.placeid),
          new Text(_place.location.latitude.toString() +
              ", " +
              _place.location.longitude.toString())
        ],
      );
    }
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Plugin example app'),
          actions: <Widget>[
            new FlatButton(
              onPressed: showPlacePicker,
              child: new Text("Pick"),
            ),
          ],
        ),
        body: body,
      ),
    );
  }
}

1. Depend on it

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


dependencies:
  flutter_places_dialog: "^1.0.1"

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_places_dialog/flutter_places_dialog.dart';
        
Version Uploaded Documentation Archive
1.0.1 Apr 12, 2018 Go to the documentation of flutter_places_dialog 1.0.1 Download flutter_places_dialog 1.0.1 archive
1.0.0 Apr 12, 2018 Go to the documentation of flutter_places_dialog 1.0.0 Download flutter_places_dialog 1.0.0 archive

Analysis

We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.49.0
  • pana: 0.10.6
  • Flutter: 0.3.2

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
0 / 100
Health:
Code health derived from static analysis. [more]
99 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
50
Learn more about scoring.

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

    Run flutter format to format lib/flutter_places_dialog.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.6 1.14.9
meta 1.1.2
sky_engine 0.0.99
typed_data 1.1.5
vector_math 2.0.6