ভূমিকা
এই টিউটোরিয়াল থেকে আপনি জানতে পারবেন কীভাবে Flutter অ্যাপে Google Maps যোগ করতে হয়। ম্যাপে একটি মার্কার থাকে, যাকে পিনও বলা হয়। এটি কোনও নির্দিষ্ট লোকেশন নির্দেশ করে।
কোড পাওয়া হচ্ছে
Flutter স্যাম্পেল
রেপোজিটরি ক্লোন বা ডাউনলোড করুন। স্যাম্পেল
কোড google_maps ডিরেক্টরিতে
পাওয়া যাবে।
আপনার ডেভেলপমেন্ট প্রোজেক্ট সেট-আপ করা
এই বিষয়ে এগিয়ে যাওয়ার আগে Flutter প্রোজেক্ট সেট-আপ করুন গাইড থেকে ধাপগুলি সম্পূর্ণ করেছেন কিনা তা নিশ্চিত করুন।
১. Flutter প্যাকেজের জন্য Google Maps ইমপোর্ট করা
- আপনার পছন্দের IDE-তে
main.dartফাইল খুলুন। - ফাইলে নিম্নলিখিত ইম্পোর্ট স্টেটমেন্ট যোগ করা হয়েছে কিনা তা যাচাই করুন:
import 'package:google_maps_flutter/google_maps_flutter.dart';
২. আপনার 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বিকল্পটি আপনার ম্যাপে মার্কার কোথায় দেখা যাবে তা সেট করে।
৩. আপনার অ্যাপ তৈরি ও চালানো
নিম্নলিখিত বিকল্পগুলির মধ্যে একটি ব্যবহার করে Flutter অ্যাপ শুরু করুন:
- আপনার IDE থেকে,
Runবোতামে ক্লিক করুন - কমান্ড লাইন থেকে,
flutter runরান করুন।
এই পৃষ্ঠার ছবির মতো, অস্ট্রেলিয়ার পূর্ব উপকূলে সিডনিকে কেন্দ্র করে একটি মার্কার সহ ম্যাপ দেখতে পাবেন।
সমস্যার সমাধান
- আপনি কোনও ম্যাপ দেখতে না পেলে, চেক করে দেখুন যে আপনি API কী পেয়েছেন কিনা এবং সেটি অ্যাপে যোগ করেছেন কিনা।
- আপনি API কী সীমাবদ্ধ করতে iOS বান্ডেল শনাক্তকারী ব্যবহার করে থাকলে, অ্যাপের জন্য বান্ডেল শনাক্তকারী যোগ করতে কী এডিট করুন:
com.google.examples.map-with-marker. - আপনার ওয়াই-ফাই বা জিপিএস কানেকশন ভালো আছে কিনা তা নিশ্চিত করুন।
- লগ দেখতে ও অ্যাপ ডিবাগ করতে Flutter DevTools ব্যবহার করুন।
- আপনি Flutter অ্যাপ চালানো সম্পর্কে আরও জানতে পারবেন।
৪. কোড বোঝা
এই কোডটি 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 ...
অভিনন্দন! আপনি একটি Flutter অ্যাপ তৈরি করেছেন যা একটি নির্দিষ্ট লোকেশন নির্দেশ করতে মার্কার সহ একটি Google Maps দেখায় এবং একটি তথ্য উইন্ডোতে অতিরিক্ত তথ্য প্রদান করে। এছাড়াও, আপনি Flutter প্যাকেজের জন্য Google Maps কীভাবে ব্যবহার করতে হয় তা শিখেছেন।