Flutter là SDK ứng dụng dành cho thiết bị di động của Google để 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 plugin Google Maps trong Flutter, bạn có thể thêm bản đồ dựa trên dữ liệu bản đồ của Google 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 các cử chỉ của người dùng, chẳng hạn như nhấp chuột và kéo. Bạn cũng có thể thêm các điểm đánh dấu vào bản đồ của mình. Các đối tượng này cung cấp thông tin bổ sung cho các vị trí trên bản đồ và cho phép người dùng tương tác với bản đồ.
Các bài viết liên quan:
Những gì bạn sẽ xây dựng
Trong bài này, bạn sẽ xây dựng một ứng dụng dành cho thiết bị di động có Google Map bằng cách sử dụng Flutter SDK. Ứng dụng của bạn sẽ:
- Hiển thị Bản đồ Google
- Truy xuất dữ liệu bản đồ từ một dịch vụ web
- Hiển thị dữ liệu này dưới dạng điểm đánh dấu trên Bản đồ
Flutter là gì?
Flutter có ba khả năng cốt lõi.
- Nhanh chóng phát triển: Xây dựng các ứng dụng Android và iOS của bạn chỉ trong mili giây với tính năng Tải lại trạng thái nóng.
- Thể hiện 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 người dùng cuối nguyên bản.
- Hiệu suất gốc trên cả iOS và Android: Các widget của Flutter kết hợp tất cả các điểm khác biệt quan trọng của nền tảng – chẳng hạn như cuộn, điều hướng, biểu tượng và phông chữ – để cung cấp hiệu suất gốc đầy đủ.
Google Maps có:
- Độ phủ 99% toàn thế giới: Xây dựng với dữ liệu toàn diện, đáng tin cậy cho hơn 200 quốc gia và vùng lãnh thổ.
- 25 triệu bản cập nhật hàng 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: Quy mô một cách tự tin, được hỗ trợ bởi cơ sở hạ tầng của Google Maps.
Bài này 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.
Những gì bạn sẽ được học
- Cách tạo một ứng dụng Flutter mới.
- Cách định cấu hình plugin Google Maps Flutter.
- 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.
Bài 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 phủ bóng lên và được cung cấp để bạn chỉ cần sao chép và dán.
Thiết lập môi trường Flutter của bạn
Bạn cần hai phần mềm để hoàn thành lab này: Flutter SDK và một trình soạn thảo. Bộ mã này giả định là Android Studio, nhưng bạn có thể sử dụng trình chỉnh sửa ưa thích của mình.
Bạn có thể chạy bảng mã này bằng bất kỳ thiết bị nào sau đây:
- Một thiết bị vật lý (Android hoặc iOS) được kết nối với máy tính của bạn và đặ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 giả lập Android. (Yêu cầu thiết lập trong Android Studio hoặc Visual Code.)
Bắt đầu
Bắt đầu với Flutter
Cách dễ nhất để bắt đầu với Flutter là sử dụng công cụ dòng lệnh Flutter để tạo tất cả mã cần thiết cho trải nghiệm bắt đầu cực đơn giản.
Thêm plugin Google Maps Flutter làm dependency
Dễ dàng thêm khả năng bổ sung vào ứng dụng Flutter bằng cách sử dụng các gói Pub. Trong bảng mã này, bạn giới thiệu plugin Google Maps Flutter bằng cách chạy lệnh sau từ thư mục project.
Bài này cũng sẽ bao gồm cách sử dụng Google Maps trong Flutter for Web. Tuy nhiên, phiên bản Web của plugin vẫn chưa được liên kết, vì vậy bạn cũng cần thêm nó vào dự án của mình.
Thêm Google Maps vào ứng dụng
Khóa API là thứ rất quan trọng
Để sử dụng Google Maps trong ứng dụng Flutter của mình, bạn cần định cấu hình một dự án API với Nền tảng Google Maps, tuân theo SDK Maps dành cho khóa Sử dụng API của Android, SDK Maps dành cho khóa API của iOS và Khóa API Sử dụng API của Maps JavaScript. Với các khóa 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.
Trước khi bắt đầu
Trước khi bắt đầu sử dụng SDK Maps dành cho Android, bạn cần có một dự án với tài khoản thanh toán và SDK Maps dành cho Android được bật. Để tìm hiểu thêm, hãy xem Thiết lập trong Bảng điều khiển đám mây.
Tạo khóa API
Khóa API là số nhận dạng duy nhất xác thực các yêu cầu liên quan đến dự án của bạn cho các mục đích sử dụng và thanh toán. Bạn phải có ít nhất một khóa API được liên kết với dự án của mình.
Để tạo khóa API:
- Đi tới trang Google Maps Platform > Credential. (https://console.cloud.google.com/project/_/google/maps-apis/credentials)
- Trên trang Thông tin xác thực, nhấp vào Create credentials > API Key.
Hộp thoại đã tạo khóa API hiển thị API key mới được tạo của bạn.
- Nhấp vào Close. Khóa API mới được liệt kê trên trang Thông tin đăng nhập trong khóa API.
Thêm khóa API cho ứng dụng Android
Để thêm khóa 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 nhập siêu dữ liệu duy nhất có chứa khóa API được tạo ở bước trước bên trong nút ứng dụng.
Thêm khóa API cho ứng dụng Web
Để thêm khóa API vào ứng dụng Web, hãy chỉnh sửa tệp index.html trong web. Thêm tham chiếu đến tập lệnh JavaScript của Maps trong phần đầu, với khóa API của bạn.
Đưa bản đồ lên màn hình
Bây giờ là lúc để có được một bản đồ trên màn hình. Cập nhật lib / main.dart như sau:.
Chạy ứng dụng
Chạy ứng dụng Flutter trong iOS hoặc Android để xem một chế độ xem bản đồ duy nhất, tập trung vào Portland. Ngoài ra, hãy chạy trình giả lập Android hoặc trình mô phỏng iOS. Hãy thoải mái sửa đổi trung tâm bản đồ để đại diện cho quê hương của bạn hoặc một nơi nào đó quan trọng đối với bạn.
