১. ভূমিকা
ফ্লাটার হলো গুগলের একটি মোবাইল অ্যাপ এসডিকে, যা দিয়ে রেকর্ড সময়ে আইওএস এবং অ্যান্ড্রয়েডে উন্নত মানের নেটিভ অভিজ্ঞতা তৈরি করা যায়।
গুগল ম্যাপস ফ্লাটার প্লাগইন ব্যবহার করে, আপনি আপনার অ্যাপ্লিকেশনে গুগল ম্যাপস ডেটার উপর ভিত্তি করে ম্যাপ যোগ করতে পারেন। প্লাগইনটি স্বয়ংক্রিয়ভাবে গুগল ম্যাপস সার্ভারে অ্যাক্সেস, ম্যাপ প্রদর্শন এবং ব্যবহারকারীর ক্লিক ও ড্র্যাগের মতো অঙ্গভঙ্গির প্রতিক্রিয়া পরিচালনা করে। আপনি আপনার ম্যাপে মার্কারও যোগ করতে পারেন। এই অবজেক্টগুলো ম্যাপের অবস্থান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে এবং ব্যবহারকারীকে ম্যাপের সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেয়।
আপনি যা তৈরি করবেন
এই কোডল্যাবে, আপনি ফ্লাটার এসডিকে ব্যবহার করে গুগল ম্যাপ সম্বলিত একটি মোবাইল অ্যাপ তৈরি করবেন। আপনার অ্যাপটি যা করবে:
|
|
ফ্লাটার কী?
ফ্লাটারের তিনটি মূল সক্ষমতা রয়েছে।
- দ্রুত ডেভেলপ করুন : স্টেটফুল হট রিলোডের সাহায্যে মিলিসেকেন্ডের মধ্যে আপনার অ্যান্ড্রয়েড এবং আইওএস অ্যাপ্লিকেশন তৈরি করুন।
- অভিব্যক্তিপূর্ণ ও নমনীয় : নেটিভ এন্ড-ইউজারদের অভিজ্ঞতার উপর গুরুত্ব দিয়ে দ্রুত ফিচার সরবরাহ করুন।
- iOS এবং Android উভয় প্ল্যাটফর্মে নেটিভ পারফরম্যান্স : ফ্লাটারের উইজেটগুলো সম্পূর্ণ নেটিভ পারফরম্যান্স প্রদানের জন্য স্ক্রলিং, নেভিগেশন, আইকন এবং ফন্টের মতো প্ল্যাটফর্মের সমস্ত গুরুত্বপূর্ণ পার্থক্যগুলোকে অন্তর্ভুক্ত করে।
গুগল ম্যাপস-এ আছে:
- বিশ্বের ৯৯% কভারেজ : ২০০টিরও বেশি দেশ ও অঞ্চলের নির্ভরযোগ্য এবং ব্যাপক ডেটা দিয়ে তৈরি।
- দৈনিক ২৫ মিলিয়ন আপডেট : নির্ভুল ও রিয়েল-টাইম অবস্থানের তথ্যের উপর নির্ভর করুন।
- ১ বিলিয়ন মাসিক সক্রিয় ব্যবহারকারী : গুগল ম্যাপস-এর পরিকাঠামোর সমর্থনে আত্মবিশ্বাসের সাথে আপনার কার্যক্রম প্রসারিত করুন।
এই কোডল্যাবটি আপনাকে iOS এবং Android উভয়ের জন্য একটি Flutter অ্যাপে Google Maps অভিজ্ঞতা তৈরি করার পদ্ধতি ধাপে ধাপে দেখাবে।
আপনি যা শিখবেন
- কীভাবে একটি নতুন ফ্লাটার অ্যাপ্লিকেশন তৈরি করবেন।
- কীভাবে একটি গুগল ম্যাপস ফ্লাটার প্লাগইন কনফিগার করবেন।
- ওয়েব সার্ভিস থেকে প্রাপ্ত লোকেশন ডেটা ব্যবহার করে ম্যাপে কীভাবে মার্কার যোগ করা যায়।
এই কোডল্যাবটি একটি ফ্লাটার অ্যাপে গুগল ম্যাপ যুক্ত করার উপর আলোকপাত করে। অপ্রাসঙ্গিক ধারণা এবং কোড ব্লকগুলো সংক্ষেপে আলোচনা করা হয়েছে এবং এগুলো শুধু কপি-পেস্ট করার জন্য সরবরাহ করা হয়েছে।
এই কোডল্যাব থেকে আপনি কী শিখতে চান?
২. আপনার ফ্লাটার পরিবেশ সেট আপ করুন।
এই ল্যাবটি সম্পন্ন করার জন্য আপনার দুটি সফটওয়্যার প্রয়োজন: ফ্লাটার এসডিকে (Flutter SDK) এবং একটি এডিটর । এই কোডল্যাবটির জন্য অ্যান্ড্রয়েড স্টুডিও (Android Studio) প্রয়োজন, তবে আপনি আপনার পছন্দের এডিটর ব্যবহার করতে পারেন।
আপনি নিম্নলিখিত ডিভাইসগুলির যেকোনো একটি ব্যবহার করে এই কোডল্যাবটি চালাতে পারেন:
- আপনার কম্পিউটারের সাথে সংযুক্ত এবং ডেভেলপার মোডে সেট করা একটি ফিজিক্যাল ডিভাইস (অ্যান্ড্রয়েড বা আইওএস)।
- আইওএস সিমুলেটর। (এর জন্য এক্সকোড টুলস ইনস্টল করতে হবে।)
- অ্যান্ড্রয়েড এমুলেটর। ( অ্যান্ড্রয়েড স্টুডিওতে সেটআপ করা প্রয়োজন।)
৩. শুরু করা
ফ্লাটার দিয়ে শুরু করা
ফ্লাটার দিয়ে কাজ শুরু করার সবচেয়ে সহজ উপায় হলো ফ্লাটার কমান্ড লাইন টুল ব্যবহার করে প্রয়োজনীয় সমস্ত কোড তৈরি করা, যা একটি সহজ ও স্বাভাবিক অভিজ্ঞতা দেবে।
$ 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.
ডিপেন্ডেন্সি হিসেবে গুগল ম্যাপস ফ্লাটার প্লাগইন যোগ করা
পাব প্যাকেজ ব্যবহার করে একটি ফ্লাটার অ্যাপে অতিরিক্ত কার্যকারিতা যোগ করা সহজ। এই কোডল্যাবে, আপনি প্রজেক্ট ডিরেক্টরি থেকে নিম্নলিখিত কমান্ডটি চালিয়ে গুগল ম্যাপস ফ্লাটার প্লাগইনটি যুক্ত করবেন।
$ 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.
iOS platform কনফিগার করা
iOS-এ Google Maps SDK-এর সর্বশেষ সংস্করণ পেতে হলে প্ল্যাটফর্মের ন্যূনতম সংস্করণ iOS 14 হতে হবে । ios/Podfile কনফিগারেশন ফাইলের উপরের অংশটি নিম্নরূপভাবে পরিবর্তন করুন।
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'
অ্যান্ড্রয়েড minSDK কনফিগার করা
অ্যান্ড্রয়েডে গুগল ম্যাপস এসডিকে ব্যবহার করার জন্য minSdk এর মান ২১ সেট করতে হবে । android/app/build.gradle কনফিগারেশন ফাইলটি নিম্নরূপভাবে পরিবর্তন করুন।
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
}
}
৪. অ্যাপে গুগল ম্যাপস যোগ করা
সবকিছুই এপিআই কী-কে কেন্দ্র করে।
আপনার ফ্লাটার অ্যাপে গুগল ম্যাপস ব্যবহার করার জন্য, আপনাকে অ্যান্ড্রয়েডের জন্য ম্যাপস এসডিকে-এর 'এপিআই কী ব্যবহার' , আইওএসের জন্য ম্যাপস এসডিকে-এর 'এপিআই কী ব্যবহার' , এবং ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর 'এপিআই কী ব্যবহার' নির্দেশিকা অনুসরণ করে গুগল ম্যাপস প্ল্যাটফর্ম দিয়ে একটি এপিআই প্রজেক্ট কনফিগার করতে হবে। এপিআই কী হাতে পাওয়ার পর, অ্যান্ড্রয়েড এবং আইওএস উভয় অ্যাপ্লিকেশন কনফিগার করার জন্য নিম্নলিখিত ধাপগুলো অনুসরণ করুন।
একটি অ্যান্ড্রয়েড অ্যাপের জন্য এপিআই কী যোগ করা
অ্যান্ড্রয়েড অ্যাপে একটি API কী যোগ করতে, android/app/src/main এ থাকা AndroidManifest.xml ফাইলটি সম্পাদনা করুন। application নোডের ভিতরে পূর্ববর্তী ধাপে তৈরি করা API কী সম্বলিত একটি একক meta-data এন্ট্রি যোগ করুন।
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>
একটি iOS অ্যাপের জন্য API কী যোগ করা
iOS অ্যাপে একটি API কী যোগ করতে, ios/Runner এ থাকা AppDelegate.swift ফাইলটি সম্পাদনা করুন। Android-এর থেকে ভিন্ন, iOS-এ একটি API কী যোগ করার জন্য Runner অ্যাপের সোর্স কোডে পরিবর্তন আনতে হয়। AppDelegate হলো মূল সিঙ্গেলটন যা অ্যাপ ইনিশিয়ালাইজেশন প্রক্রিয়ার একটি অংশ।
এই ফাইলটিতে দুটি পরিবর্তন করুন। প্রথমত, গুগল ম্যাপস হেডারগুলো যুক্ত করার জন্য একটি #import স্টেটমেন্ট যোগ করুন এবং তারপর GMSServices সিঙ্গেলটনের provideAPIKey() মেথডটি কল করুন। এই এপিআই কী-টি গুগল ম্যাপসকে সঠিকভাবে ম্যাপ টাইলস পরিবেশন করতে সক্ষম করে।
ios/Runner/AppDelegate.swift
import Flutter
import UIKit
import GoogleMaps // Add this import
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
// TODO: Add your Google Maps API key
GMSServices.provideAPIKey("YOUR-API-KEY") // Add this line
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
একটি ওয়েব অ্যাপের জন্য এপিআই কী যোগ করা
ওয়েব অ্যাপে এপিআই কী (API key) যোগ করতে, web index.html ফাইলটি সম্পাদনা করুন। `head` সেকশনে আপনার এপিআই কী-সহ `Maps` জাভাস্ক্রিপ্ট স্ক্রিপ্টটির একটি রেফারেন্স যোগ করুন।
ওয়েব/ইনডেক্স.এইচটিএমএল
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="google_maps_in_flutter">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<!-- Add your Google Maps API key here -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>
<title>google_maps_in_flutter</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script src="flutter_bootstrap.js" async></script>
</body>
</html>
স্ক্রিনে একটি মানচিত্র রাখা
এখন স্ক্রিনে একটি মানচিত্র দেখানোর পালা। lib/main.dart ফাইলের বিষয়বস্তু নিচের লেখা দিয়ে প্রতিস্থাপন করুন।
lib/main.dart
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late GoogleMapController mapController;
final LatLng _center = const LatLng(45.521563, -122.677433);
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green[700],
),
home: Scaffold(
appBar: AppBar(
title: const Text('Maps Sample App'),
elevation: 2,
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 11.0,
),
),
),
);
}
}
অ্যাপটি চালানো হচ্ছে
পোর্টল্যান্ডকে কেন্দ্র করে একটি একক মানচিত্র দেখতে ফ্লাটার অ্যাপটি iOS বা Android-এ চালান। বিকল্পভাবে, একটি Android এমুলেটর বা একটি iOS সিমুলেটর চালু করুন। আপনার নিজের শহর বা আপনার কাছে গুরুত্বপূর্ণ কোনো স্থানকে উপস্থাপন করার জন্য মানচিত্রের কেন্দ্রটি পরিবর্তন করতে পারেন।
$ flutter run
|
|
৫. গুগলকে মানচিত্রে যুক্ত করুন
উত্তর আমেরিকা , ল্যাটিন আমেরিকা , ইউরোপ , এশিয়া প্যাসিফিক থেকে শুরু করে আফ্রিকা ও মধ্যপ্রাচ্য পর্যন্ত বিশ্বজুড়ে গুগলের অনেক অফিস রয়েছে। এই মানচিত্রগুলোর একটি চমৎকার বিষয় হলো, যদি আপনি এগুলো খতিয়ে দেখেন, তাহলে দেখতে পাবেন যে JSON ফরম্যাটে অফিসের অবস্থানের তথ্য সরবরাহ করার জন্য এগুলোতে একটি সহজে ব্যবহারযোগ্য API এন্ডপয়েন্ট রয়েছে। এই ধাপে, আপনি এই অফিসের অবস্থানগুলো মানচিত্রে যুক্ত করবেন। এই ধাপে, আপনি JSON পার্স করার জন্য কোড জেনারেশন ব্যবহার করবেন।
প্রজেক্টে নিম্নোক্তভাবে তিনটি নতুন ফ্লাটার ডিপেন্ডেন্সি যোগ করুন। সহজে HTTP রিকোয়েস্ট করার জন্য http প্যাকেজটি, JSON ডকুমেন্ট উপস্থাপনের জন্য অবজেক্ট স্ট্রাকচার ডিক্লেয়ার করতে json_serializable ও json_annotation এবং কোড জেনারেশন সাপোর্টের জন্য build_runner যোগ করুন।
$ flutter pub add http json_annotation json_serializable dev:build_runner Resolving dependencies... Downloading packages... + _fe_analyzer_shared 67.0.0 (68.0.0 available) + analyzer 6.4.1 (6.5.0 available) + args 2.5.0 + build 2.4.1 + build_config 1.1.1 + build_daemon 4.0.1 + build_resolvers 2.4.2 + build_runner 2.4.9 + build_runner_core 7.3.0 + built_collection 5.1.1 + built_value 8.9.2 + checked_yaml 2.0.3 + code_builder 4.10.0 + convert 3.1.1 + crypto 3.0.3 + dart_style 2.3.6 + file 7.0.0 + fixnum 1.1.0 + frontend_server_client 4.0.0 + glob 2.1.2 + graphs 2.3.1 + http 1.2.1 + http_multi_server 3.2.1 + http_parser 4.0.2 + io 1.0.4 js 0.6.7 (0.7.1 available) + json_annotation 4.9.0 + json_serializable 6.8.0 leak_tracker 10.0.4 (10.0.5 available) leak_tracker_flutter_testing 3.0.3 (3.0.5 available) + logging 1.2.0 material_color_utilities 0.8.0 (0.11.1 available) meta 1.12.0 (1.14.0 available) + mime 1.0.5 + package_config 2.1.0 + pool 1.5.1 + pub_semver 2.1.4 + pubspec_parse 1.2.3 + shelf 1.4.1 + shelf_web_socket 1.0.4 + source_gen 1.5.0 + source_helper 1.3.4 test_api 0.7.0 (0.7.1 available) + timing 1.0.1 + typed_data 1.3.2 + watcher 1.1.0 + web_socket_channel 2.4.5 + yaml 3.1.2 Changed 42 dependencies! 8 packages have newer versions incompatible with dependency constraints. Try `flutter pub outdated` for more information.
কোড জেনারেশনের মাধ্যমে JSON পার্সিং
আপনি হয়তো লক্ষ্য করেছেন যে এপিআই এন্ডপয়েন্ট থেকে প্রাপ্ত JSON ডেটার একটি নিয়মিত কাঠামো রয়েছে। সেই ডেটাকে অবজেক্টে মার্শেল করার জন্য কোড তৈরি করা সুবিধাজনক হবে, যা আপনি কোডে ব্যবহার করতে পারবেন।
lib/src ডিরেক্টরিতে, একটি locations.dart ফাইল তৈরি করুন এবং ফেরত আসা JSON ডেটার কাঠামোটি নিম্নরূপভাবে বর্ণনা করুন:
lib/src/locations.dart
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:http/http.dart' as http;
import 'package:json_annotation/json_annotation.dart';
part 'locations.g.dart';
@JsonSerializable()
class LatLng {
LatLng({
required this.lat,
required this.lng,
});
factory LatLng.fromJson(Map<String, dynamic> json) => _$LatLngFromJson(json);
Map<String, dynamic> toJson() => _$LatLngToJson(this);
final double lat;
final double lng;
}
@JsonSerializable()
class Region {
Region({
required this.coords,
required this.id,
required this.name,
required this.zoom,
});
factory Region.fromJson(Map<String, dynamic> json) => _$RegionFromJson(json);
Map<String, dynamic> toJson() => _$RegionToJson(this);
final LatLng coords;
final String id;
final String name;
final double zoom;
}
@JsonSerializable()
class Office {
Office({
required this.address,
required this.id,
required this.image,
required this.lat,
required this.lng,
required this.name,
required this.phone,
required this.region,
});
factory Office.fromJson(Map<String, dynamic> json) => _$OfficeFromJson(json);
Map<String, dynamic> toJson() => _$OfficeToJson(this);
final String address;
final String id;
final String image;
final double lat;
final double lng;
final String name;
final String phone;
final String region;
}
@JsonSerializable()
class Locations {
Locations({
required this.offices,
required this.regions,
});
factory Locations.fromJson(Map<String, dynamic> json) =>
_$LocationsFromJson(json);
Map<String, dynamic> toJson() => _$LocationsToJson(this);
final List<Office> offices;
final List<Region> regions;
}
Future<Locations> getGoogleOffices() async {
const googleLocationsURL = 'https://about.google/static/data/locations.json';
// Retrieve the locations of Google offices
try {
final response = await http.get(Uri.parse(googleLocationsURL));
if (response.statusCode == 200) {
return Locations.fromJson(
json.decode(response.body) as Map<String, dynamic>);
}
} catch (e) {
if (kDebugMode) {
print(e);
}
}
// Fallback for when the above HTTP request fails.
return Locations.fromJson(
json.decode(
await rootBundle.loadString('assets/locations.json'),
) as Map<String, dynamic>,
);
}
এই কোডটি যোগ করার পরে, আপনার IDE (যদি আপনি ব্যবহার করেন) কিছু লাল আঁকাবাঁকা দাগ দেখাবে, কারণ এটি locations.g.dart. এই তৈরি হওয়া ফাইলটি আনটাইপড JSON স্ট্রাকচার এবং নেমড অবজেক্টের মধ্যে রূপান্তর করে। নিচের মতো করে build_runner চালিয়ে এটি তৈরি করুন:
$ dart run build_runner build --delete-conflicting-outputs [INFO] Generating build script... [INFO] Generating build script completed, took 357ms [INFO] Creating build script snapshot...... [INFO] Creating build script snapshot... completed, took 10.5s [INFO] There was output on stdout while compiling the build script snapshot, run with `--verbose` to see it (you will need to run a `clean` first to re-snapshot). [INFO] Initializing inputs [INFO] Building new asset graph... [INFO] Building new asset graph completed, took 646ms [INFO] Checking for unexpected pre-existing outputs.... [INFO] Deleting 1 declared outputs which already existed on disk. [INFO] Checking for unexpected pre-existing outputs. completed, took 3ms [INFO] Running build... [INFO] Generating SDK summary... [INFO] 3.4s elapsed, 0/3 actions completed. [INFO] Generating SDK summary completed, took 3.4s [INFO] 4.7s elapsed, 2/3 actions completed. [INFO] Running build completed, took 4.7s [INFO] Caching finalized dependency graph... [INFO] Caching finalized dependency graph completed, took 36ms [INFO] Succeeded after 4.8s with 2 outputs (7 actions)
আপনার কোডটি এখন আবার ত্রুটিমুক্তভাবে বিশ্লেষণ হওয়া উচিত। এরপর, আমাদের getGoogleOffices ফাংশনে ব্যবহৃত ফলব্যাক locations.json ফাইলটি যোগ করতে হবে। এই ফলব্যাকটি অন্তর্ভুক্ত করার একটি কারণ হলো, এই ফাংশনে লোড করা স্ট্যাটিক ডেটা CORS হেডার ছাড়াই পরিবেশিত হয়, এবং এর ফলে এটি একটি ওয়েব ব্রাউজারে লোড হতে ব্যর্থ হয়। অ্যান্ড্রয়েড এবং আইওএস ফ্লাটার অ্যাপগুলোর CORS হেডারের প্রয়োজন হয় না, কিন্তু মোবাইল ডেটা অ্যাক্সেস সবসময়েই বেশ খামখেয়ালি হতে পারে।
আপনার ব্রাউজারে https://about.google/static/data/locations.json এ যান এবং এর বিষয়বস্তু অ্যাসেট ডিরেক্টরিতে সংরক্ষণ করুন। বিকল্পভাবে, আপনি নিম্নলিখিতভাবে কমান্ড লাইন ব্যবহার করতে পারেন।
$ mkdir assets
$ cd assets
$ curl -o locations.json https://about.google/static/data/locations.json
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 30348 100 30348 0 0 75492 0 --:--:-- --:--:-- --:--:-- 75492
এখন যেহেতু আপনি অ্যাসেট ফাইলটি ডাউনলোড করে ফেলেছেন, সেটি আপনার pubspec.yaml ফাইলের flutter সেকশনে যোগ করুন।
pubspec.yaml
flutter:
uses-material-design: true
assets:
- assets/locations.json
ম্যাপের ডেটা অনুরোধ করার জন্য main.dart ফাইলটি পরিবর্তন করুন, এবং তারপর প্রাপ্ত তথ্য ব্যবহার করে ম্যাপে অফিস যুক্ত করুন:
lib/main.dart
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'src/locations.dart' as locations;
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final Map<String, Marker> _markers = {};
Future<void> _onMapCreated(GoogleMapController controller) async {
final googleOffices = await locations.getGoogleOffices();
setState(() {
_markers.clear();
for (final office in googleOffices.offices) {
final marker = Marker(
markerId: MarkerId(office.name),
position: LatLng(office.lat, office.lng),
infoWindow: InfoWindow(
title: office.name,
snippet: office.address,
),
);
_markers[office.name] = marker;
}
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green[700],
),
home: Scaffold(
appBar: AppBar(
title: const Text('Google Office Locations'),
elevation: 2,
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: const CameraPosition(
target: LatLng(0, 0),
zoom: 2,
),
markers: _markers.values.toSet(),
),
),
);
}
}
এই কোডটি বেশ কয়েকটি অপারেশন সম্পাদন করে:
-
_onMapCreatedএ, এটি আগের ধাপের JSON পার্সিং কোড ব্যবহার করে এবং লোড হওয়া পর্যন্তawaitকরে। এরপর, এটিsetState()কলব্যাকের ভিতরে প্রাপ্ত ডেটা ব্যবহার করেMarkerতৈরি করে। অ্যাপটি নতুন মার্কার পেলে, setState ফ্লাটারকে স্ক্রিন পুনরায় আঁকার জন্য সংকেত দেয়, যার ফলে অফিসের অবস্থানগুলো প্রদর্শিত হয়। - মার্কারগুলো
GoogleMapউইজেটের সাথে যুক্ত একটিMapসংরক্ষিত থাকে। এটি মার্কারগুলোকে সঠিক ম্যাপের সাথে সংযুক্ত করে। অবশ্যই, আপনার একাধিক ম্যাপ থাকতে পারে এবং প্রতিটিতে ভিন্ন ভিন্ন মার্কার প্রদর্শন করতে পারেন।
আপনি যা সম্পন্ন করেছেন তার একটি স্ক্রিনশট এখানে দেওয়া হলো। এই পর্যায়ে আরও অনেক আকর্ষণীয় বিষয় যোগ করা যেতে পারে। উদাহরণস্বরূপ, আপনি অফিসগুলোর একটি তালিকা দৃশ্য (list view) যোগ করতে পারেন, যা ব্যবহারকারী কোনো অফিসে ক্লিক করলে মানচিত্রটিকে সরিয়ে দেবে এবং জুম করবে। কিন্তু, যেমনটা বলা হয়ে থাকে, এই কাজটি পাঠকের জন্যই রেখে দেওয়া হলো!
৬. পরবর্তী পদক্ষেপ
অভিনন্দন!
আপনি কোডল্যাবটি সম্পন্ন করেছেন এবং গুগল ম্যাপ সহ একটি ফ্লাটার অ্যাপ তৈরি করেছেন! আপনি একটি JSON ওয়েব সার্ভিসের সাথেও কাজ করেছেন।
অন্যান্য পরবর্তী পদক্ষেপ
এই কোডল্যাবটি একটি মানচিত্রে একাধিক বিন্দুকে দৃশ্যমান করার একটি অভিজ্ঞতা তৈরি করেছে। এমন অনেক মোবাইল অ্যাপ রয়েছে যা এই সক্ষমতার উপর ভিত্তি করে বিভিন্ন ব্যবহারকারীর চাহিদা পূরণ করে। আরও কিছু রিসোর্স আছে যা আপনাকে এই কাজটি আরও এগিয়ে নিয়ে যেতে সাহায্য করতে পারে:
- ফ্লাটার এবং গুগল ম্যাপস দিয়ে মোবাইল অ্যাপ তৈরি করুন (ক্লাউড নেক্সট '১৯-এ প্রদত্ত একটি বক্তৃতা)
- হ্যাড্রিয়েন লেজার্ডের
google_maps_webserviceপ্যাকেজটি গুগল ম্যাপস ওয়েব সার্ভিস, যেমন ডিরেকশনস এপিআই , ডিসটেন্স ম্যাট্রিক্স এপিআই এবং প্লেসেস এপিআই-কে ব্যবহার করা অত্যন্ত সহজ করে তোলে। - আপনি যদি JSON REST-এর মাধ্যমে একটি API ব্যবহারের বিভিন্ন বিকল্প দেখতে চান, তাহলে JSON REST API নিয়ে কাজ করার নানান উপায় জানতে অ্যান্ড্রু ব্রগডনের মিডিয়াম পোস্টটি দেখুন।