ভূমিকা
এই টিউটোরিয়ালে দেখানো হয়েছে কীভাবে আপনার ফ্লাটার অ্যাপে একটি গুগল ম্যাপ যুক্ত করবেন। ম্যাপটিতে একটি নির্দিষ্ট অবস্থান নির্দেশ করার জন্য মার্কার বা পিন অন্তর্ভুক্ত থাকে।
কোডটি পাওয়া
ফ্লাটার স্যাম্পল রিপোজিটরিটি ক্লোন বা ডাউনলোড করুন। স্যাম্পল কোডটি google_maps ডিরেক্টরিতে পাওয়া যাবে।
আপনার উন্নয়ন প্রকল্প স্থাপন করা
এই বিষয়টি নিয়ে আলোচনা চালিয়ে যাওয়ার আগে , 'ফ্লাটার প্রজেক্ট সেট আপ করুন' গাইডে বর্ণিত ধাপগুলো আপনি সম্পন্ন করেছেন কিনা তা নিশ্চিত করুন।
১. ফ্লাটার প্যাকেজের জন্য গুগল ম্যাপস ইম্পোর্ট করুন
- আপনার পছন্দের IDE-তে
main.dartফাইলটি খুলুন। - ফাইলটিতে নিম্নলিখিত ইম্পোর্ট স্টেটমেন্টটি যোগ করা হয়েছে কিনা তা যাচাই করুন:
import 'package:google_maps_flutter/google_maps_flutter.dart';
২. আপনার ফ্লাটার অ্যাপে গুগল ম্যাপস যোগ করুন
Scaffold উইজেটের ভেতরে বডি হিসেবে একটি GoogleMap উইজেট যোগ করুন।
GoogleMap( initialCameraPosition: CameraPosition( target: _center, zoom: 11.0, ), markers: { const Marker( markerId: MarkerId('Sydney'), position: LatLng(-33.86, 151.20), ) }, )
-
markerIdঅপশনটি আপনার মার্কারকে চিহ্নিত করে। -
positionঅপশনটি নির্ধারণ করে যে আপনার ম্যাপে মার্কারটি কোথায় প্রদর্শিত হবে।
৩. আপনার অ্যাপ তৈরি এবং পরিচালনা করা
নিম্নলিখিত বিকল্পগুলির মধ্যে যেকোনো একটি ব্যবহার করে ফ্লাটার অ্যাপটি চালু করুন:
- আপনার IDE থেকে,
Runবোতামে ক্লিক করুন। - কমান্ড লাইন থেকে
flutter runচালান।
আপনার অস্ট্রেলিয়ার পূর্ব উপকূলে অবস্থিত সিডনিকে কেন্দ্র করে একটি চিহ্নিত স্থানসহ একটি মানচিত্র দেখা উচিত, যা এই পৃষ্ঠার ছবিটির মতো।
সমস্যা সমাধান
- যদি আপনি মানচিত্র দেখতে না পান, তাহলে যাচাই করুন যে আপনি একটি API কী পেয়েছেন এবং সেটি অ্যাপে যোগ করেছেন।
- আপনি যদি এপিআই কী সীমাবদ্ধ করতে আইওএস বান্ডেল আইডেন্টিফায়ার ব্যবহার করে থাকেন, তাহলে অ্যাপটির বান্ডেল আইডেন্টিফায়ার যোগ করতে কী-টি সম্পাদনা করুন:
com.google.examples.map-with-marker। - আপনার একটি ভালো ওয়াইফাই বা জিপিএস সংযোগ আছে কিনা তা নিশ্চিত করুন।
- লগ দেখতে ও অ্যাপটি ডিবাগ করতে ফ্লাটার ডেভটুলস ব্যবহার করুন।
- ফ্লাটার অ্যাপ চালানো সম্পর্কে আপনি আরও জানতে পারেন।
৪. কোডটি বোঝা
এই কোডটি গিটহাবে পাওয়া যাবে।
- প্রয়োজনীয় প্যাকেজগুলো ইম্পোর্ট করুন এবং অ্যাপটি চালু করুন।
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(-33.86, 151.20); void _onMapCreated(GoogleMapController controller) { mapController = controller; }
- অ্যাপে মানচিত্র প্রদর্শনের জন্য প্রয়োজনীয় উইজেটগুলো যোগ করুন।
@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Maps Sample App'), backgroundColor: Colors.green[700], ), body: GoogleMap( onMapCreated: _onMapCreated, initialCameraPosition: CameraPosition( target: _center, zoom: 11.0, ), // CameraPosition ), // GoogleMap ), // Scaffold ); // MaterialApp } }
- আপনার অ্যাপে উইজেটটি যোগ করতে মার্কার উইজেটগুলো যোগ করুন।
body: GoogleMap( onMapCreated: _onMapCreated, initialCameraPosition: CameraPosition( target: _center, zoom: 11.0, ), markers: { const Marker( markerId: const MarkerId("Sydney"), position: LatLng(-33.86, 151.20), ), // Marker }, // markers ), // GoogleMap ...
- মার্কারটিতে একটি তথ্য উইন্ডো যোগ করুন।
const Marker( markerId: const MarkerId("Sydney"), position: LatLng(-33.86, 151.20), infoWindow: InfoWindow( title: "Sydney", snippet: "Capital of New South Wales", ), // InfoWindow ), //Marker ...
অভিনন্দন! আপনি এমন একটি ফ্লাটার অ্যাপ তৈরি করেছেন যা একটি নির্দিষ্ট স্থান চিহ্নিত করার জন্য মার্কারসহ গুগল ম্যাপ প্রদর্শন করে এবং একটি তথ্য উইন্ডোতে অতিরিক্ত তথ্য প্রদান করে। আপনি Google Maps for Flutter প্যাকেজটি কীভাবে ব্যবহার করতে হয় তাও শিখেছেন।