You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
samples/flutter_maps_firestore
Brett Morgan 676698aa83
flutter pub upgrade (#241)
5 years ago
..
ios flutter_maps_firestore: regenerate ios dir (#230) 5 years ago
lib flutter_maps_firestore: regenerate ios dir (#230) 5 years ago
test Add analysis_options, fix and format. (#102) 6 years ago
.gitignore Analysis options uplift to 1.8 (#169) 5 years ago
.metadata flutter_maps_firestore: regenerate ios dir (#230) 5 years ago
README.md
analysis_options.yaml Analysis options uplift to 1.8 (#169) 5 years ago
pubspec.lock flutter pub upgrade (#241) 5 years ago
pubspec.yaml Analysis options uplift to 1.8 (#169) 5 years ago

README.md

Flutter Maps Firestore

A Flutter sample app that shows the end product of the Cloud Next '19 talk Build Mobile Apps With Flutter and Google Maps. The live coding starts at about 17:40.

Goals for this sample

  • Showcase how to build an app that uses Google Maps with Flutter:
    • Loading a list of Ice Cream shops from Cloud Firestore
    • Listing the shops in a custom carousel
    • Showing the shop locations on a map using Markers
    • Controlling the Google Map from the carousel

The important bits

Cloud Firestore

To set up Cloud Firestore connectivity, follow the steps outlined in the Cloud Firestore package setup section.

Next, you need to populate your Cloud Firestore with a collection named ice_cream_stores, structured a bit like this:

ice_cream_stores:
  ChIJ70taCKKAhYAR5IMmYwQT4Ts:
    placeId: ChIJ70taCKKAhYAR5IMmYwQT4Ts
    address: 432 Octavia St #1a, San Francisco, CA 94102, USA
    location: 37.7763629, -122.4241918
    name: Smitten Ice Cream

The collection name is referenced from _HomePageState's initState method. The placeId, address, location and name are used at various points in the widget tree to render appropriate data.

Google Maps

You need to add a Google Maps SDK for iOS API key to ios/Runner/AppDelegate.m. This enables the Google Map to render. You will also need to add a Google Maps Web Services API key to lib/api_key.dart.

To reiterate the warning that we gave during the talk, do not put Web Service API keys in your production binary. You need to build a proxy service to serve pre-authenticated content to your mobile applications so you can change API keys as required. We only did this to make it easy to demonstrate on stage.

Questions/issues

If you have a general question about building with Google Maps in Flutter, the best places to go are:

If you run into an issue with the sample itself, please file an issue in the main Flutter repo.