ভূমিকা
এই টিউটোরিয়ালটি আপনাকে দেখায় কিভাবে আপনার Flutter অ্যাপে একটি Google মানচিত্র যোগ করতে হয়। একটি নির্দিষ্ট অবস্থান নির্দেশ করতে মানচিত্রে একটি মার্কার রয়েছে, যাকে একটি পিনও বলা হয়।
কোড পাচ্ছেন
ফ্লটার স্যাম্পল রিপোজিটরি ক্লোন করুন বা ডাউনলোড করুন। নমুনা কোডটি google_maps ডিরেক্টরিতে পাওয়া যাবে।
আপনার উন্নয়ন প্রকল্প সেট আপ
এই বিষয়টি চালিয়ে যাওয়ার আগে আপনি একটি ফ্লাটার প্রকল্প নির্দেশিকা সেট আপ করুন -এ বর্ণিত ধাপগুলি সম্পূর্ণ করেছেন তা নিশ্চিত করুন।
1. Flutter প্যাকেজের জন্য Google Maps আমদানি করুন৷
- আপনার পছন্দের IDE-তে আপনার
main.dartফাইল খুলুন। - যাচাই করুন যে নিম্নলিখিত আমদানি বিবৃতি ফাইলটিতে যোগ করা হয়েছে:
import 'package:google_maps_flutter/google_maps_flutter.dart';
2. আপনার Flutter অ্যাপে Google Maps যোগ করুন
Scaffold উইজেটের মধ্যে, বডি হিসাবে একটি GoogleMap উইজেট যোগ করুন।
GoogleMap( initialCameraPosition: CameraPosition( target: _center, zoom: 11.0, ), markers: { const Marker( markerId: MarkerId('Sydney'), position: LatLng(-33.86, 151.20), ) }, )
-
markerIdবিকল্পটি আপনার মার্কারকে লেবেল করে। -
positionবিকল্পটি সেট করে যেখানে মার্কারটি আপনার মানচিত্রে প্রদর্শিত হবে।
3. আপনার অ্যাপ তৈরি এবং চালানো
নিম্নলিখিত বিকল্পগুলির মধ্যে একটি ব্যবহার করে Flutter অ্যাপটি শুরু করুন:
- আপনার IDE থেকে
Runবাটনে ক্লিক করুন - কমান্ড লাইন থেকে, রান
flutter run।
আপনি অস্ট্রেলিয়ার পূর্ব উপকূলে সিডনি কেন্দ্রিক একটি মার্কার সহ একটি মানচিত্র দেখতে পাবেন, এই পৃষ্ঠার চিত্রের মতো।
সমস্যা সমাধান
- আপনি যদি একটি মানচিত্র দেখতে না পান, আপনি একটি API কী পেয়েছেন এবং এটি অ্যাপে যোগ করেছেন কিনা তা পরীক্ষা করুন।
- আপনি API কী সীমাবদ্ধ করতে iOS বান্ডেল শনাক্তকারী ব্যবহার করলে, অ্যাপটির জন্য বান্ডেল শনাক্তকারী যোগ করতে কীটি সম্পাদনা করুন:
com.google.examples.map-with-marker। - আপনার একটি ভাল ওয়াইফাই বা জিপিএস সংযোগ আছে তা নিশ্চিত করুন।
- লগ দেখতে এবং অ্যাপ ডিবাগ করতে Flutter DevTools ব্যবহার করুন।
- আপনি একটি ফ্লাটার অ্যাপ চালানো সম্পর্কে আরও জানতে পারেন।
4. কোড বোঝা
এই কোডটি GitHub এ পাওয়া যাবে।
- প্রয়োজনীয় প্যাকেজ আমদানি করুন এবং অ্যাপটি শুরু করুন।
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 মানচিত্র প্রদর্শন করে। আপনি ফ্লটার প্যাকেজের জন্য Google মানচিত্র কীভাবে ব্যবহার করবেন তাও শিখেছেন।