1. Giới thiệu
Flutter là SDK ứng dụng di động của Google giúp tạo ra trải nghiệm gốc chất lượng cao trên iOS và Android trong thời gian kỷ lục.
Với trình bổ trợ Flutter của Google Maps, bạn có thể thêm bản đồ dựa trên dữ liệu Google Maps vào ứng dụng của mình. Plugin tự động xử lý quyền truy cập vào máy chủ Google Maps, hiển thị bản đồ và phản hồi với cử chỉ của người dùng như nhấp chuột và kéo. Bạn cũng có thể thêm điểm đánh dấu vào bản đồ của mình. Các đối tượng này cung cấp thêm thông tin về vị trí trên bản đồ và cho phép người dùng tương tác với bản đồ.
Sản phẩm bạn sẽ tạo ra
Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng di động có Google Map bằng cách sử dụng Flutter SDK. Ứng dụng này sẽ:
|
Flutter là gì?
Flutter có 3 khả năng cốt lõi.
- Phát triển nhanh: Tạo ứng dụng Android và iOS chỉ trong vài mili giây với tính năng Tải lại nóng cấp trạng thái.
- Thể hiện rõ ràng và linh hoạt: Nhanh chóng cung cấp các tính năng tập trung vào trải nghiệm gốc của người dùng cuối.
- Hiệu suất gốc trên cả iOS và Android: Các tiện ích của Flutter kết hợp mọi điểm khác biệt quan trọng của nền tảng — chẳng hạn như tính năng cuộn, điều hướng, biểu tượng và phông chữ — để mang lại hiệu suất gốc đầy đủ.
Google Maps có:
- Phạm vi bao phủ 99% trên toàn thế giới: Xây dựng dựa trên dữ liệu đáng tin cậy, toàn diện cho hơn 200 quốc gia và vùng lãnh thổ.
- 25 triệu bản cập nhật mỗi ngày: Dựa vào thông tin vị trí chính xác, theo thời gian thực.
- 1 tỷ người dùng hoạt động hằng tháng: Tự tin mở rộng quy mô, được Google Maps hỗ trợ cơ sở hạ tầng.
Lớp học lập trình này sẽ hướng dẫn bạn cách tạo trải nghiệm Google Maps trong ứng dụng Flutter cho cả iOS và Android.
Kiến thức bạn sẽ học được
- Cách tạo một ứng dụng Flutter mới.
- Cách định cấu hình trình bổ trợ Flutter của Google Maps.
- Cách thêm Điểm đánh dấu vào bản đồ, sử dụng dữ liệu vị trí từ dịch vụ web.
Lớp học lập trình này tập trung vào việc thêm bản đồ Google vào ứng dụng Flutter. Các khái niệm và khối mã không liên quan được che khuất và chỉ được cung cấp cho bạn để sao chép và dán.
Bạn muốn tìm hiểu gì từ lớp học lập trình này?
2. Thiết lập môi trường Flutter
Bạn cần có 2 phần mềm để hoàn thành phòng thí nghiệm này: Flutter SDK và trình chỉnh sửa. Lớp học lập trình này giả định Android Studio nhưng bạn có thể sử dụng trình chỉnh sửa ưu tiên của mình.
Bạn có thể chạy lớp học lập trình này bằng bất kỳ thiết bị nào sau đây:
- Một thiết bị thực (Android hoặc iOS) kết nối với máy tính của bạn và được đặt ở chế độ nhà phát triển.
- Trình mô phỏng iOS. (Yêu cầu cài đặt công cụ Xcode.)
- Trình mô phỏng Android. (Yêu cầu thiết lập trong Android Studio.)
3. Bắt đầu
Làm quen với Flutter
Cách dễ nhất để bắt đầu sử dụng Flutter là sử dụng công cụ dòng lệnh Flutter để tạo tất cả các mã cần thiết nhằm mang lại một trải nghiệm bắt đầu đơn giản.
$ flutter create google_maps_in_flutter --platforms android,ios,web Creating project google_maps_in_flutter... Resolving dependencies in `google_maps_in_flutter`... Downloading packages... Got dependencies in `google_maps_in_flutter`. Wrote 81 files. All done! You can find general documentation for Flutter at: https://docs.flutter.dev/ Detailed API documentation is available at: https://api.flutter.dev/ If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev In order to run your application, type: $ cd google_maps_in_flutter $ flutter run Your application code is in google_maps_in_flutter/lib/main.dart.
Thêm trình bổ trợ Flutter của Google Maps làm phần phụ thuộc
Bạn có thể dễ dàng thêm chức năng bổ sung vào ứng dụng Flutter bằng cách sử dụng các gói Pub. Trong lớp học lập trình này, bạn sẽ giới thiệu trình bổ trợ Flutter của Google Maps bằng cách chạy lệnh sau từ thư mục dự án.
$ cd google_maps_in_flutter $ flutter pub add google_maps_flutter Resolving dependencies... Downloading packages... + csslib 1.0.0 + flutter_plugin_android_lifecycle 2.0.19 + flutter_web_plugins 0.0.0 from sdk flutter + google_maps 7.1.0 + google_maps_flutter 2.6.1 + google_maps_flutter_android 2.8.0 + google_maps_flutter_ios 2.6.0 + google_maps_flutter_platform_interface 2.6.0 + google_maps_flutter_web 0.5.7 + html 0.15.4 + js 0.6.7 (0.7.1 available) + js_wrapping 0.7.4 leak_tracker 10.0.4 (10.0.5 available) leak_tracker_flutter_testing 3.0.3 (3.0.5 available) material_color_utilities 0.8.0 (0.11.1 available) meta 1.12.0 (1.14.0 available) + plugin_platform_interface 2.1.8 + sanitize_html 2.1.0 + stream_transform 2.1.0 test_api 0.7.0 (0.7.1 available) + web 0.5.1 Changed 16 dependencies! 6 packages have newer versions incompatible with dependency constraints. Try `flutter pub outdated` for more information.
Định cấu hình iOS platform
Để tải SDK Google Maps phiên bản mới nhất trên iOS, bạn cần có phiên bản iOS 14 trở lên cho nền tảng. Sửa đổi phần đầu của tệp cấu hình ios/Podfile
như sau.
ios/Podfile
# Google Maps SDK requires platform version 14
# https://developers.google.com/maps/flutter-package/config#ios
platform :ios, '14.0'
# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'
Định cấu hình Android minSDK
Để sử dụng SDK Google Maps trên Android, bạn phải đặt minSdk
thành 21. Sửa đổi tệp cấu hình android/app/build.gradle
như sau.
android/app/build.gradle
android {
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId = "com.example.google_maps_in_flutter"
// Minimum Android version for Google Maps SDK
// https://developers.google.com/maps/flutter-package/config#android
minSdk = 21
targetSdk = flutter.targetSdkVersion
versionCode = flutterVersionCode.toInteger()
versionName = flutterVersionName
}
}
4. Thêm Google Maps vào ứng dụng
Đó là tất cả về khoá API
Để sử dụng Google Maps trong ứng dụng Flutter, bạn cần định cấu hình dự án API bằng Nền tảng Google Maps, theo SDK Maps dành cho Sử dụng khoá API của Android, SDK Maps dành cho iOS' Sử dụng khoá API và Sử dụng khoá API của API JavaScript cho Maps. Với khoá API trong tay, hãy thực hiện các bước sau để định cấu hình cả ứng dụng Android và iOS.
Thêm khoá API cho ứng dụng Android
Để thêm khoá API vào ứng dụng Android, hãy chỉnh sửa tệp AndroidManifest.xml
trong android/app/src/main
. Thêm một mục meta-data
chứa khoá API đã tạo ở bước trước vào nút application
.
android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:label="google_maps_in_flutter"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
<!-- TODO: Add your Google Maps API key here -->
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR-KEY-HERE"/>
<activity
android:name=".MainActivity"
android:exported="true"
android:launchMode="singleTop"
android:taskAffinity=""
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<!-- Specifies an Android theme to apply to this Activity as soon as
the Android process has started. This theme is visible to the user
while the Flutter UI initializes. After that, this theme continues
to determine the Window background behind the Flutter UI. -->
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<!-- Don't delete the meta-data below.
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
<meta-data
android:name="flutterEmbedding"
android:value="2" />
</application>
<!-- Required to query activities that can process text, see:
https://developer.android.com/training/package-visibility and
https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.
In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
<queries>
<intent>
<action android:name="android.intent.action.PROCESS_TEXT"/>
<data android:mimeType="text/plain"/>
</intent>
</queries>
</manifest>
Thêm khoá API cho ứng dụng iOS
Để thêm khoá API vào ứng dụng iOS, hãy chỉnh sửa tệp AppDelegate.swift
trong ios/Runner
. Không giống như Android, để thêm khoá API trên iOS, bạn phải thay đổi mã nguồn của ứng dụng Runner. AppDelegate là singleton cốt lõi, một phần trong quy trình khởi chạy ứng dụng.
Thực hiện hai thay đổi đối với tệp này. Trước tiên, hãy thêm câu lệnh #import
để lấy tiêu đề Google Maps, sau đó gọi phương thức provideAPIKey()
của singleton GMSServices
. Khoá API này cho phép Google Maps phân phát đúng các ô bản đồ.
ios/Runner/AppDelegate.swift
import