Dasturiy injiniring” yo’nalishi 652-19-guruh talabasi Po’latov Assadulloning

Google map

Xaritalarni ko'rsatish ko'plab mobil ilovalarning asosiy funksiyasi - Google Maps, Yelp, Foursquare, Uber, Snapchat, UberEats va boshqalar - barcha mashhur ilovalarda ma'lum xarita xususiyatlari mavjud. Keling, interaktiv va doimgi foydalanuvchi tajribasini yaratish uchun Flutter ilovalarida xaritalarni qanday qo'llashimizni ko'rib chiqaylik. Flutter ekotizimi gullab-yashnamoqda va yaqin kelajakda mobil ilovalarni ishlab chiqishning eng ko’p o'rnatilgan platformalaridan biri sifatida katta iz qoldiradi. Jamiyat jadal rivojlanmoqda va allaqachon ko'plab kuchli kutubxonalar mavjud. Ushbu qo‘llanmada biz Flutter ilovalarimizda xaritalarni ko‘rsatish uchun googler_maps_flutter to‘plamidan foydalanamiz. Xaritalar Yelp yoki UberEats, xarid qilish ilovalari, geolocation ilovalari kabi navigatsiya va yetkazib berish bilan shug‘ullanuvchi ilovalarda qo‘llaniladi. Biz undan manzillarni ko‘rsatish, joylarni kuzatish, real vaqtda navigatsiya va hokazolarni ko‘rsatish uchun foydalanishimiz mumkin. Google Developer Console’dan Google Maps API’dan foydalanish uchun Android Google map SDK bilan jihozlangan Google API kalitini Flutter loyihamizga integratsiya qilishdir. Keyin, biz ilova ekranida xaritani ko'rsatish uchun aytib o'tilgan paketdan foydalanamiz. Shuningdek, biz markerlar va ularni moslashtirish bilan ishlaymiz.

Birinchidan, biz yangi Flutter loyihasini yaratishimiz kerak. Buning uchun Flutter SDK va boshqa Flutter ilovasini ishlab chiqish bilan bog'liq talablar to'g'ri o'rnatilganligiga ishonch hosil qilamiz. Agar hamma narsa to'g'ri sozlangan bo'lsa, loyihani yaratish uchun biz kerakli mahalliy katalogda quyidagi buyruqni bajarishimiz mumkin: flutter create googleMapExample
Loyihani o'rnatgandan so'ng, biz loyiha katalogiga o'tishimiz va loyihani mavjud emulyatorda yoki haqiqiy qurilmada ishga tushirish uchun terminalda quyidagi buyruqni bajarishimiz mumkin:
flutter run Muvaffaqiyatli qurgandan so'ng, biz emulyator ekranida quyidagi natijani olamiz:

Endi biz standart shablonni o'z loyiha tuzilmamiz shabloniga almashtirishimiz kerak. Birinchidan, ./lib papkasida ./screens nomli papka yaratishimiz kerak . Keyin, ./lib/screens papkasida biz Home.dart deb nomlangan yangi fayl yaratishimiz kerak . Home.dart ichida biz Scaffoldasosiy Ilovalar paneli va bo'sh korpusli vidjetni qaytaradigan oddiy Stateful vidjet sinfini amalga oshirmoqchimiz Container. Home.dart uchun kod quyidagi kod parchasida ko'rsatilgan:
import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Maps"), centerTitle: true, ), body: Container( child: Center( child: Text("Maps"), ), ), ); } }
Endi biz main.dart faylidagi standart shablonni almashtirishimiz va quyidagi kod parchasida ko'rsatilganidek, vidjet variantida HomePageekranni chaqirishimiz kerak:homeMaterialApp
import 'package:flutter/material.dart'; import 'package:mapExample/screens/Home.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomePage(), ); } }
Shunday qilib, biz quyidagi skrinshotda ko'rsatilgandek ekranni olamiz: