شرح كيفية تغيير ايقونة الموقع في الخريطة داخل Flutter باكثر من طريقة

شرح كيفية تغيير ايقونة الموقع في الخريطة داخل Flutter باكثر من طريقة

في هذا المقال سوف نشرح لكم الطرق التي تستطيع من خلالها تغيير ايقونة ال marker في Flutter بسهوله تامه على الخريطة الخاصه بك وهذا الامر بسيط جدا وسوف نشارك معكم مجموعه من الطرق التي تستطيع من خلالها تنفيذ هذه العملية بسهوله عبر اكثر من طريقة والتي سوف نشاركها معكم في هذه المقالة حتى تتمكن من استخدامها بدون اي مشاكل في مشروعك .

هناك العديد من الأطر المتاحة لتبدأ عند إنشاء تطبيق متعدد المنصات. قد تفكر في Flutter أو Ionic على التوالي. Ionic هو إطار عمل يتمتع بشعبية كبيرة بالفعل ويدمج تقنية الويب في تطوير التطبيقات. يمكنه دمج React و Angular و Vue ويحتوي على عدد كبير من مكتبات الطرف الثالث. Flutter ، لاعب جديد نسبيًا ، لديه قاعدة جماهيرية تتوسع بسرعة. إنها تستخدم طريقة فريدة للتطوير عبر الأنظمة الأساسية على أساس محرك رسومي ثنائي الأبعاد. الهدف الأساسي لإطار العمل هذا هو تمكين تطوير سريع لواجهة المستخدم يمكن مقارنته بالأصل من حيث الأداء والمظهر. بدلا من استخدام العادية فقط

android sdk manager تحميل flutter developers applications create app android android studio mac

How to change icon marker in Flutter

في الاكواد التاليه لدينا ثلاث طرق تستطيع من خلالها تغيير الايقونة بدون مشاكل كما هو موضح شرحنا كيف تقوم بعرض الايقونه من الassets وبعدها عرضها لل marker كما هو موضح , يتم شرح كيف تستدعي الايقونة وكيف تقوم بتركيبها يمكنك استخدام اي طريقة ترغب بها من الطرق التالي لتغيير الايقونة وجميع هذه الطرق سوف تغير الايقونه معك بدون مشاكل .

ui.dart

// ---------- you can use
Uint8List? customMarker;

Future<Uint8List> changeIconLocation() async {
    ByteData byteData = await DefaultAssetBundle.of(context).load("assets/img/icon/category_2.png");
    customMarker = byteData.buffer.asUint8List();
    return byteData.buffer.asUint8List();
  }

Marker(
    icon: BitmapDescriptor.fromBytes(customMarker!,size: const Size(100,100)),
    );

// ----------- Or
  BitmapDescriptor sourceIcon = BitmapDescriptor.defaultMarker;

  void setCustomMarker() {
      BitmapDescriptor.fromAssetImage(
        ImageConfiguration.empty,
        'assets/img/map/marker-5.png',
      ).then((onValue) {
        destinationIcon = onValue;
      });
    }

	Marker(
    	icon: sourceIcon
      );

// ----------- Or


  Future<BitmapDescriptor> _getAssetIcon(BuildContext context, String icon) async {
    final Completer<BitmapDescriptor> bitmapIcon = Completer<BitmapDescriptor>();
    final ImageConfiguration config = createLocalImageConfiguration(context, size: Size(5, 5));

    AssetImage(icon)
        .resolve(config)
        .addListener(ImageStreamListener((ImageInfo image, bool sync) async {
      final ByteData? bytes = await image.image.toByteData(format: ImageByteFormat.png);
      final BitmapDescriptor bitmap = BitmapDescriptor.fromBytes(bytes!.buffer.asUint8List());
      bitmapIcon.complete(bitmap);
    })
    );

    return await bitmapIcon.future;
  }


		Marker(
        markerId: MarkerId(contact['name']),
        position: contact['position'],
        icon: await _getAssetIcon(context, 'assets/img/map/avatar-1.png').then((value) => value)
      );