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 3bafa557f7
Update `sdk` constraint range and update runners (#1706)
2 years ago
..
ios Update `sdk` constraint range and update runners (#1706) 2 years ago
lib enable material 3 on flutter_maps_firestore (#1609) 2 years ago
test Add analysis_options, fix and format. (#102) 5 years ago
.gitignore update sample to use new versions (#702) 4 years ago
.metadata Update `sdk` constraint range and update runners (#1706) 2 years ago
README.md Initial commit flutter_maps_firestore (#93) 5 years ago
analysis_options.yaml Create `analysis_defaults` package (#1654) 2 years ago
codelab_rebuild.yaml Flutter 3.7.0 (#1556) 2 years ago
pubspec.yaml Update `sdk` constraint range and update runners (#1706) 2 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.