Belajar Flutter Episode 5 - Belajar membuat Maps pada Flutter

Summary

The instructor demonstrates how to add a Google Maps page to a Flutter project. Flutter does not include a built-in maps feature, so developers can use a package such as google_maps_flutter, which requires configuring Google Maps APIs and an API key. The instructor contrasts this approach with OpenStreetMap, covered in an earlier lesson.

Main Ideas and Steps

1. Enable Google Maps APIs

• Sign in to the Google Cloud Console and enable the APIs required for the project.
• The tutorial refers to enabling the Android Maps SDK and the Maps JavaScript API. Enable the iOS SDK as well if building for iOS.
• Create an API key under APIs & Services → Credentials → Create credentials → API key.
• The instructor demonstrates creating a key without restrictions and copying it for the project. The key is removed from the recorded example afterward.

2. Add the Flutter Package

• Open a terminal in the Flutter project. The instructor recommends Command Prompt, though PowerShell may also work.
• Add the dependency with:

bash flutter pub add google_maps_flutter

• The package is added to pubspec.yaml; the instructor notes that the command retrieves the current version.
• Run flutter pub get to fetch dependencies. The instructor also points to pub.dev for package details and installation instructions.

3. Configure Android

• Open the Android manifest and add Google Maps metadata containing the API key.
• Save the manifest after adding the key.

4. Build the Map Page

• Import the package and create a map widget in the page’s class.
• Set the map’s initial target to the campus location and configure the zoom level.
• The lesson also refers to markers as part of the map setup, though the demonstration focuses primarily on displaying the map.

5. Configure the Web Version

A map that works on Android may not display when the project runs in a browser.

• Add the Maps JavaScript script to web/index.html, including the relevant API key.
• The browser requires this JavaScript setup. Android devices and emulators use the Android configuration instead.

6. Add a Page Scaffold and App Bar

To show a page title, return a Scaffold rather than returning the Google Map widget directly. Add an AppBar; the instructor uses “Google Map Flutter” as an example title.

7. Troubleshoot

If the map does not appear:

• Check the code and API configuration.
• Try a full restart instead of relying only on hot reload.
• Confirm that the correct platform configuration is in place: Android SDK settings for Android, and the Maps JavaScript script for web.

Speakers and Sources

• Speaker: One instructor/presenter.
• Tools and sources: Google Cloud Console, Google Maps APIs (including Android and JavaScript), the google_maps_flutter package, pub.dev, Flutter terminal commands, the Android manifest, and web/index.html.